/* SPDX-License-Identifier: LicenseRef-Fundus-Commercial-1.0 */
/* SPDX-FileCopyrightText: 2026 Sascha Holliger */

/* The fleet view. The shell, the notices and the utilities are Fundus's own rules (20-layout,
   35-modals, 40-utilities), copied so the two read as one product; the box card takes the
   settings panel's measures (33d-settings). Loads after 10-tokens.css, which declares the layer
   order and every --fd-* token used here. */

@layer layout {
  .app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
  }

  .app__main {
    width: 100%;
    max-width: var(--fd-shell-max);
    margin-inline: auto;
    padding: var(--fd-space-5) var(--fd-space-4);
  }

  .masthead {
    border-bottom: 1px solid var(--fd-line);
    background: var(--fd-surface);
  }

  .masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fd-space-2) var(--fd-space-5);
    width: 100%;
    max-width: var(--fd-shell-max);
    margin-inline: auto;
    padding: var(--fd-space-2) var(--fd-space-4);
    padding-top: max(var(--fd-space-2), env(safe-area-inset-top));
    min-height: 3.25rem;
  }

  .masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-3);
    color: var(--fd-accent);
  }

  .brandmark {
    display: inline-block;
    fill: currentColor;
    stroke: none;
  }

  .masthead__logo {
    flex: none;
    height: 1.35rem;
    /* the wordmark is 1889 x 682 */
    width: calc(1.35rem * 1889 / 682);
  }

  .masthead__title {
    color: var(--fd-muted);
    font-size: var(--fd-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .masthead__summary {
    margin: 0 0 0 auto;
    color: var(--fd-muted);
    font-size: var(--fd-size-sm);
  }

  .masthead__out { margin: 0; }

  /* ---- the centred single card (sign-in), as Fundus 20-layout ---- */
  .single {
    display: grid;
    place-items: center;
    min-height: 70dvh;
    padding: var(--fd-space-4);
  }

  .single__card { width: min(24rem, 100%); }

  .fleet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--fd-space-4);
    align-items: start;
  }
}

@layer components {
  .box {
    margin: 0;
    padding: var(--fd-space-4) var(--fd-space-5) var(--fd-space-5);
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-radius);
    background: var(--fd-surface);
    min-width: 0;
  }

  .box[data-state="retired"] { opacity: 0.6; }

  .box__head {
    display: flex;
    align-items: baseline;
    gap: var(--fd-space-3);
  }

  .box__label {
    margin: 0;
    font-family: var(--fd-font-content);
    font-size: var(--fd-size-lg);
    font-weight: 400;
    line-height: 1.3;
  }

  .box__head .level { margin-inline-start: auto; }
  .box__notes { margin: var(--fd-space-1) 0 0; }
  .box__seen { margin: var(--fd-space-1) 0 0; }
  .box__id { margin: var(--fd-space-4) 0 0; overflow-wrap: anywhere; }
  .box__id code { background: transparent; padding: 0; color: inherit; }
  .box .notice { margin: var(--fd-space-3) 0 0; padding: var(--fd-space-2) var(--fd-space-3); font-size: var(--fd-size-sm); }

  /* the section heading of a card, as Fundus's .record__legend */
  .legend {
    margin: var(--fd-space-4) 0 var(--fd-space-2);
    font-size: var(--fd-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-muted);
  }

  .kv {
    display: grid;
    grid-template-columns: minmax(5rem, auto) 1fr;
    gap: var(--fd-space-1) var(--fd-space-4);
    margin: var(--fd-space-3) 0 0;
    font-size: var(--fd-size-sm);
  }
  .kv dt { color: var(--fd-muted); }
  .kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

  /* A level is a code, set in the data face; the line carries it and the colour reinforces it,
     the accent only for ok, as the certainty marks do. */
  .level {
    display: inline-block;
    padding: 0 0.4rem;
    border: 1px solid currentColor;
    border-radius: var(--fd-radius);
    color: var(--fd-muted);
    font-family: var(--fd-font-data);
    font-size: var(--fd-size-xs);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .level[data-level="ok"] { color: var(--fd-accent); }
  .level[data-level="warning"] { color: var(--fd-warn); }
  .level[data-level="critical"],
  .level[data-level="silent"] { color: var(--fd-danger); }
  .level[data-level="critical"],
  .level[data-level="silent"] { font-weight: 700; }

  .findings__area {
    margin: var(--fd-space-2) 0 var(--fd-space-1);
    color: var(--fd-faint);
    font-family: var(--fd-font-data);
    font-size: var(--fd-size-xs);
  }

  .findings {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fd-size-sm);
  }
  /* Pico's `ul li { list-style: square }` is on the li, not the ul */
  .findings li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--fd-space-2);
    list-style: none;
    margin: 0 0 var(--fd-space-1);
  }

  /* label, line, value: three columns, so the lines start and end together */
  .trends {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(4rem, 1fr) auto;
    gap: var(--fd-space-1) var(--fd-space-3);
    align-items: center;
    margin: 0;
    font-size: var(--fd-size-sm);
  }
  .trends dt { color: var(--fd-muted); }
  .trends dd { margin: 0; }

  .spark {
    display: block;
    width: 100%;
    height: 1.5rem;
    overflow: visible;
  }
  .spark polyline {
    fill: none;
    stroke: var(--fd-accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .spark__value {
    font-family: var(--fd-font-data);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

  /* ---- the sign-in card (Fundus 30-record, 34-people) ---- */
  .object-title {
    font-family: var(--fd-font-content);
    font-size: var(--fd-size-2xl);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--fd-space-2);
  }

  .login__brand {
    display: flex;
    align-items: center;
    gap: var(--fd-space-3);
    margin-block-end: var(--fd-space-3);
    color: var(--fd-accent);
  }

  .login__logo {
    /* the wordmark is 1889 x 682 */
    height: 1.5rem;
    width: calc(1.5rem * 1889 / 682);
  }

  .single__card .notice { margin-block: var(--fd-space-3); }

  /* one box per digit: login-code.js builds them in front of the real field, which stays hidden
     and is what gets submitted */
  .codeboxes {
    display: flex;
    gap: var(--fd-space-2);
    margin-block: var(--fd-space-2) var(--fd-space-3);
  }

  .codeboxes__cell {
    inline-size: 2.75ch;
    padding: var(--fd-space-2) 0;
    text-align: center;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-radius);
    background: var(--fd-sunken);
  }

  .codeboxes__cell:focus {
    border-color: var(--fd-accent);
    outline: 2px solid var(--fd-accent);
    outline-offset: 1px;
  }

  .codeboxes__cell:not(:placeholder-shown),
  .codeboxes__cell[disabled] {
    border-color: var(--fd-accent);
  }

  .codeboxes__cell[disabled] {
    opacity: 0.7;
    cursor: default;
  }

  /* ---- notices (Fundus 35-modals) ----
     Eckwinkel: the state colour in two corner marks (top-left, bottom-right), not a left rail;
     four thin background bars, so any element takes it with no extra markup. */
  .notice {
    --k: var(--fd-line);
    --len: 8px;
    --wt: 1px;
    --inset: 0px;
    position: relative;
    padding: var(--fd-space-3) var(--fd-space-4);
    margin-bottom: var(--fd-space-4);
    border-radius: 0;
    background-color: color-mix(in srgb, var(--k, var(--fd-line)) 6%, var(--fd-surface));
    background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--k), var(--k)), linear-gradient(var(--k), var(--k)),
      linear-gradient(var(--k), var(--k)), linear-gradient(var(--k), var(--k));
    background-position:
      left var(--inset) top var(--inset), left var(--inset) top var(--inset),
      right var(--inset) bottom var(--inset), right var(--inset) bottom var(--inset);
    background-size:
      var(--len) var(--wt), var(--wt) var(--len),
      var(--len) var(--wt), var(--wt) var(--len);
  }
  .notice[data-kind="info"],
  .notice[data-kind="ok"]     { --k: var(--fd-accent); }
  .notice[data-kind="warn"]   { --k: var(--fd-warn); }
  .notice[data-kind="danger"] { --k: var(--fd-danger); }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .muted  { color: var(--fd-muted); }
  .faint  { color: var(--fd-faint); }
  .small  { font-size: var(--fd-size-sm); }
  .tiny   { font-size: var(--fd-size-xs); }
  .no-margin { margin: 0; }
}