/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Page layout for the cluster detail, cost and log pages, the user and
 * account pages, Grafana, the benchmarks, Home, Docs, the error page and
 * the sign-in pages. Layout only: shared components live in
 * components.css, and every colour and size comes from tokens.css.
 */

/* --------------------------------------------------------------- shared --- */

/*
 * Key-value values come from records and may break inside a word, as
 * .value-wrap values do (components.css).
 */
.ofe .main .kv dd { overflow-wrap: anywhere; }

/*
 * A table with many columns (partitions, benchmark runs) would be wider
 * than its card just above the width where it reflows if every heading
 * stayed on one line, so headings wrap, but only between words.
 */
.ofe .main .table thead th { white-space: normal; }

/* ----------------------------------------------------------------- home --- */

/*
 * The home dashboard, as in the reference design: cluster counts, then what a
 * cluster needs and whether it is in place.
 */
.ofe .metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ofe .metric {
  padding: 1rem 1.125rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
}

.ofe .metric__value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ofe .metric__label {
  font-size: 0.8125rem;
  color: var(--md-sys-color-on-surface-variant);
}

.ofe .home-start { margin: 0; }
/* The start card's subtitle is the page's lead sentence, as large as in the design. */
.ofe .home-start .card__sub { font-size: 0.9375rem; }
.ofe .home-start__actions { margin-top: 1.25rem; }

/* What a cluster needs, each with a tick once it is in place. */
.ofe .checklist { margin: 0; padding: 0; list-style: none; }

.ofe .checklist__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.ofe .checklist__item:last-child { border-bottom: 0; }

.ofe .checklist__mark {
  display: grid;
  place-items: center;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
}

.ofe .checklist__item[data-done="yes"] .checklist__mark {
  background: var(--ofe-sys-color-success-container);
  color: var(--ofe-sys-color-success);
}

.ofe .checklist__item[data-done="yes"] .checklist__mark::before { content: "\2713"; }

.ofe .checklist__item[data-done="no"] .checklist__mark {
  border: 2px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-outline);
}

.ofe .checklist__body { flex: 1 1 12rem; min-width: 0; }
.ofe .checklist__label { font-weight: 600; font-size: 0.875rem; }

.ofe .checklist__text {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--md-sys-color-on-surface-variant);
}

.ofe .checklist__note {
  font-size: 0.8125rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* The start card and the failed-deployment notice side by side. */
.ofe .panes__col { min-width: 0; }
.ofe .banner__list { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }

/* ----------------------------------------------------------- error page --- */

.ofe .error-card > p { margin: 0 0 0.5rem; }

/* ----------------------------------------------------------------- docs --- */

.ofe .doc {
  max-width: 72ch;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.ofe .doc__h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.ofe .doc__h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.ofe .doc ul,
.ofe .doc ol { padding-left: 1.25rem; }

.ofe .doc__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- cluster detail --- */

.ofe .cluster-progress { margin-bottom: 1.5rem; }

.ofe .cluster-progress .cluster-stall { margin-top: 0.75rem; }

/*
 * The deploy progress widget, fitted to a narrow column: its header wraps
 * and its padding shrinks with the room it has.
 */
.ofe .m3-deploy {
  min-width: 0;
  padding: clamp(0.75rem, 3vw, 1.25rem) clamp(0.75rem, 3vw, 1.5rem);
  overflow-wrap: break-word;
}

.ofe .m3-deploy__header { flex-wrap: wrap; gap: 0.25rem 1rem; }

/* On a very narrow screen a word breaks rather than leave the widget. */
@media (max-width: 19.99rem) {
  .ofe .m3-deploy { overflow-wrap: anywhere; }
}

.ofe .m3-deploy__stage-text { min-width: 0; }

.ofe .cluster-panes { margin-bottom: 0.5rem; }

.ofe .cluster-grafana { margin-left: 0.5rem; }

.ofe .cluster-advanced { margin-top: 1rem; }

.ofe .cluster-advanced > summary {
  cursor: pointer;
  color: var(--md-sys-color-primary);
  font-weight: 600;
}

.ofe .cluster-advanced > .kv { margin-top: 0.75rem; }

/*
 * A status chip in a very narrow card (a phone at high zoom) flows as
 * inline text, so even its longest word can wrap, as it does in tables.
 */
@container card (max-width: 14rem) {
  .ofe .kv .pill {
    display: inline;
    padding-inline: 0.375rem;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .ofe .kv .pill::before { margin-right: 0.25rem; }
}

/* ---------------------------------------------------------- cluster form --- */

/*
 * The cluster create and edit form: section cards one under another, the
 * fields of a block as many to a row as fit, and each partition or registry
 * as a bordered group of its own.
 */
.ofe .cluster-form { max-width: 72rem; }

.ofe .cluster-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0 1rem;
  align-items: start;
}

.ofe .cluster-form__group + .cluster-form__group { margin-top: 0.5rem; }

.ofe .cluster-form__group-title {
  margin: 1rem 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

.ofe .cluster-form__group .kv { margin-bottom: 1rem; }

.ofe .cluster-form__row {
  min-width: 0;
  margin: 0 0 1rem;
  padding: clamp(0.75rem, 2.5vw, 1rem);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.ofe .cluster-form__row-title {
  padding: 0 0.25rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ofe .cluster-form__row-actions { justify-content: flex-end; }

.ofe .cluster-form__row-actions .field--check { margin-bottom: 0; }

.ofe .cluster-form__gpu-warning { margin-top: 0.25rem; }

.ofe .cluster-form .banner--warn ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }

.ofe .cluster-form__actions { margin-bottom: 1rem; }

/* On a very narrow screen a word breaks rather than leave its card. */
@media (max-width: 19.99rem) {
  .ofe .cluster-form .field__label,
  .ofe .cluster-form .field__help,
  .ofe .cluster-form .field--check > label { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------- cluster cost --- */

.ofe .cost-empty { color: var(--md-sys-color-on-surface-variant); }

/* ------------------------------------------------- Cloud Storage sign-in --- */

.ofe .gcp-auth__intro > p { margin: 0 0 0.5rem; max-width: 72ch; }

.ofe .gcp-auth > .btn-row { margin-bottom: 1rem; }

.ofe .gcp-auth__status { max-width: 40rem; }

.ofe .gcp-auth__text { margin: 0 0 0.75rem; overflow-wrap: anywhere; }

.ofe .gcp-auth__step:empty { display: none; }

.ofe .gcp-auth__form .field { max-width: 24rem; }

/* ---------------------------------------------------------------- users --- */

.ofe .user-card,
.ofe .user-form { max-width: 48rem; }

/*
 * An email has no break point of its own, so in a narrow cell it would
 * break anywhere ("example.c / om"). Its cell keeps room for an ordinary
 * address (30ch, by the same empty block as .value-wrap) in the table,
 * and takes the whole row in the stacked layout; only a longer address
 * wraps.
 */
.ofe .main .table .value-wrap--email::after { width: 30ch; }

@container table-card (max-width: 67.99rem) {
  .ofe .table-card--wider > .table--reflow tbody .value-wrap--email { grid-column: 1 / -1; }
}

/* ----------------------------------------------------- account, benchmarks --- */

.ofe .account-card,
.ofe .benchmark-form { max-width: 48rem; }

/* ---------------------------------------------------------------- grafana --- */

/*
 * Grafana uses the whole space below the app bar: no page padding, and a
 * frame exactly as tall as the window less the bar's measured height (the
 * second declaration follows a phone's own browser bars where supported).
 */
.ofe .grafana-main { padding: 0; }

.ofe .grafana-frame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--ofe-bar-height));
  height: calc(100dvh - var(--ofe-bar-height));
  border: 0;
}

/* ---------------------------------------------------- sign-in and reset --- */

/* One narrow card, centred, for the sign-in and password reset pages. */
.ofe .auth {
  display: flex;
  justify-content: center;
  padding-top: clamp(0rem, 4vw, 2rem);
}

.ofe .auth-card {
  width: 100%;
  max-width: 28rem;
  overflow-wrap: break-word;
}

/* On a very narrow screen a word breaks rather than leave the card. */
@media (max-width: 19.99rem) {
  .ofe .auth-card { overflow-wrap: anywhere; }
}

.ofe .auth-card .page-head__title { margin-bottom: 1rem; }

.ofe .auth-card .banner { margin-bottom: 1rem; }

.ofe .auth-card__text { margin: 0 0 1rem; }

.ofe .auth-card__links { margin: 1rem 0 0; }

.ofe .auth-card__google {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}