/* ============================================================================
   watb-app.css — the parts every WebAppsToolBox APP shares, and the site has
   no need of. Loaded AFTER toolbox.css, on every app page.

   🔴 ONE SUITE (Paul, 2026-11-04): "[WATB] == WATB + Se7en + DiveCalc —
      everything should be uniform across them all, and all future children."
      The site is the PARENT and its look is the primary one:

        /assets/css/toolbox.css    the parent: tokens, type, links, .wrap, .card,
                                   .badge, .notice, .btn, focus rings. Unchanged.
        /assets/css/watb-app.css   THIS FILE: banner + trail, the heading with its
                                   platform pills, the footer band, the first-launch
                                   acknowledgement, the (i), form controls, result
                                   panels and the working.
        /assets/js/watb-app.js     the shared behaviour (popups, settings, ack).
        apps/<app>/public/assets/  ONLY what is truly that app's own.

   🔴 NO APP CARRIES A COPY of the tokens or of anything here. A copy drifts (the
      banners did, 2026-11-04); a change made here appears in every app at once.
   🔴 Built on toolbox.css's tokens only; the colour rules there hold here too:
      --base00 / --base01 never carry text, and accents carry colour, never
      legibility. Red is the suite's error colour and is not used here.
   ⚠️ OFFLINE: an app's service worker must also cache /assets/css/toolbox.css,
      this file and /assets/js/watb-app.js, or the app loses its look offline.
   ========================================================================= */

/* --- The page: banner on top, footer band at the bottom ------------------ */
.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app > main { flex: 1 0 auto; width: 100%; padding-block: 1.5rem 2rem; }

/* --- The banner: the SAME measurements as toolbox.css .nav ---------------- */
.appbar {
  flex: none;
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 54, 66, 0.72);                  /* = .nav */
  border-bottom: 1px solid rgba(88, 110, 117, 0.35);
  padding-top: env(safe-area-inset-top, 0px);         /* the notch, installed */
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .appbar {
    background: rgba(7, 54, 66, 0.62);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.appbar__bar {
  height: var(--nav-h); max-width: var(--wrap-wide); margin: 0 auto; padding: 0 22px;   /* = .nav__bar */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* 🔴 The way back to the suite is ALWAYS at the LEFT, as a trail (Paul,
   2026-11-04): [WATB] WebAppsToolBox / [app icon] App Name. Under 600px:
   [WATB] / [icon] ShortName. */
.appbar__left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.appbar__suite {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  font-size: 12px; letter-spacing: .01em; color: var(--base1); text-decoration: none; white-space: nowrap;
}
.appbar__suite:hover { color: var(--base2); text-decoration: none; }
.appbar__suite svg { width: 16px; height: 16px; flex: none; display: inline-block; }
.appbar__sep { color: var(--base1); font-size: 15px; flex: none; }
.appbar__brand {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  color: var(--base2); font-size: 15px; font-weight: 600; letter-spacing: -.01em;   /* = .nav__brand */
  white-space: nowrap; text-decoration: none;
}
.appbar__brand:hover { color: var(--base3); text-decoration: none; }
.appbar__brand svg { width: 20px; height: 20px; flex: none; display: inline-block; color: var(--tint, var(--accent)); }
.appbar__short { display: none; }
.appbar__links { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2.4rem); list-style: none; margin: 0; padding: 0; }
.appbar__links li { display: flex; }
.appbar__link {
  font-size: 12px; letter-spacing: .01em; color: var(--base1);   /* = .nav__link */
  text-decoration: none; white-space: nowrap; transition: color var(--speed) var(--ease);
}
.appbar__link:hover { color: var(--base2); text-decoration: none; }
.appbar__link[aria-current="page"] { color: var(--base3); }
@media (max-width: 599px) {
  .appbar__bar { padding: 0 1rem; }
  .appbar__suite-name { display: none; }      /* the logo alone; aria-label names it */
  .appbar__left { gap: .4rem; }
  .appbar__full { display: none; }
  .appbar__short { display: inline; }
}
@media (max-width: 389px) {
  .appbar__bar { padding: 0 .6rem; gap: .75rem; }
  .appbar__brand { font-size: 14px; flex: none; }
  .appbar__brand svg { display: none; }       /* the name still says what it is */
}

/* A menu in the banner (DiveCalc's Formulas): a <details>, so no JS is needed. */
.appmenu { position: relative; }
.appmenu summary { cursor: pointer; list-style: none; font-size: 12px; letter-spacing: .01em; color: var(--base1); }
.appmenu summary::-webkit-details-marker { display: none; }
.appmenu summary::after { content: " ▾"; }
.appmenu ol {
  position: absolute; right: 0; top: calc(100% + .9rem); width: 280px; max-height: 70vh; overflow: auto;
  margin: 0; padding: .4rem 0; list-style: none;
  background: var(--base02); border: 1px solid rgba(88, 110, 117, 0.6); border-radius: var(--radius-sm);
}
.appmenu li a { display: block; padding: .4rem .9rem; font-size: 14px; color: var(--base1); text-decoration: none; }
.appmenu li a:hover { color: var(--base2); background: rgba(88, 110, 117, .2); }
.appmenu li a[aria-current="page"] { color: var(--base3); border-left: 3px solid var(--tint, var(--accent)); padding-left: calc(.9rem - 3px); }

/* --- The heading, with the native-app pills at its right ----------------- */
.app-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap;
  margin: 0 0 .5rem;
}
.app-head h1 { margin: 0; }
.platforms { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0 0 .45rem; flex: none; }
.platform {
  position: relative; display: inline-block; padding: .1rem .55rem; border-radius: 980px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;          /* = .badge */
  color: var(--text-strong); border: 1px solid rgba(88, 110, 117, 0.6); cursor: default;
}
.platform__tip {
  display: none; position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50;
  padding: .25rem .55rem; border-radius: 6px; white-space: nowrap; font-size: 12px; font-weight: 400; letter-spacing: 0;
  background: var(--base02); color: var(--base1); border: 1px solid var(--tint, var(--accent));
}
.platform:focus .platform__tip { display: block; }
/* 🔴 Hover only where a pointer really hovers: on a touch screen a tap leaves a
   "sticky" hover that never clears (Paul's iPad, 2026-11-04). Touch opens by
   focus; watb-app.js closes on a tap elsewhere, a second tap, or Esc. */
@media (hover: hover) { .platform:hover .platform__tip { display: block; } }

/* --- State tags: toolbox.css .badge, tinted (Paul, 2026-11-04) -------------
   Rec green, Tech violet, InDev blue. Violet, not red: red is the suite's
   error colour. As every accent here: the border and dot, never the text. */
.badge--rec   { --tint: var(--green); }
.badge--tech  { --tint: var(--violet); }
.badge--indev { --tint: var(--blue); }

/* --- A hover on a word or a value (.tip): more detail, the (i)'s pattern ------
   E.g. DiveCalc's "Tx 20/43", whose tip is "(O₂ 20%, He 43%, N₂ 37%)". A dotted
   underline says there is more; focus, tap or a real hover shows it. */
.tip { position: relative; display: inline-block; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--tint, var(--accent)); text-underline-offset: 4px; }
.tip__text {
  display: none; position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; white-space: nowrap;
  padding: .3rem .6rem; border-radius: 6px; font: 400 14px/1.4 var(--font);
  background: var(--base02); color: var(--base1); border: 1px solid var(--tint, var(--accent));
}
.tip:focus .tip__text { display: block; }
@media (hover: hover) { .tip:hover .tip__text { display: block; } }

/* --- The (i) ---------------------------------------------------------------- */
.info { position: relative; display: inline-block; vertical-align: middle; }
.info__btn {
  position: relative; width: .85rem; height: .85rem; padding: 0; border-radius: 50%;
  font: italic 600 .55rem/1 Georgia, serif; color: var(--base1);
  background: transparent; border: 1px solid var(--base1); cursor: pointer;
}
.info__btn::after { content: ""; position: absolute; inset: -.55rem; }   /* a fingertip-sized tap area */
.info__btn:hover { color: var(--base2); border-color: var(--base2); }
.info__text {
  display: none; position: absolute; z-index: 50; left: 50%; top: calc(100% + .4rem);
  transform: translateX(-50%); width: min(280px, 80vw);
  padding: .6rem .75rem; border-radius: 6px; font-size: 14px; line-height: 1.4;
  font-style: normal; font-weight: 400; text-align: left;
  background: var(--base02); color: var(--base1); border: 1px solid var(--tint, var(--accent));
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.info:focus-within .info__text { display: block; }
@media (hover: hover) { .info:hover .info__text { display: block; } }
.settings .info__text { left: auto; right: 0; transform: none; }

/* --- Forms ------------------------------------------------------------------ */
.settings { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.setting { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .35rem; }
.setting select { grid-column: 1 / -1; }
.setting label, .field label { color: var(--base1); font-size: 14px; }
.app select, .app input[type="text"] {
  font: inherit; font-size: 16px; color: var(--base2); background: var(--base02);
  border: 1px solid rgba(88, 110, 117, 0.6); border-radius: var(--radius-sm); padding: .4rem .55rem; min-width: 7rem;
}
.app button:not(.info__btn):not(.qr__btn):not(.term__btn) {
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  padding: .55rem 1.4rem; border-radius: 980px;                      /* = .btn */
  background: var(--base2); color: var(--base03); border: 1px solid var(--base2);
  transition: opacity var(--speed) var(--ease);
}
.app button:not(.info__btn):not(.qr__btn):not(.term__btn):hover { opacity: .85; }
.inputs {
  margin: 1.5rem 0 0; padding: 1rem 1.25rem; border: 1px solid rgba(88, 110, 117, 0.6); border-radius: var(--radius);
  display: flex; gap: 1.25rem; flex-wrap: wrap;
}
.inputs legend { color: var(--base2); padding: 0 .4rem; }
.field { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .35rem; row-gap: .25rem; }
.field select, .field input, .field .fixed { grid-column: 1 / -1; }
.field .fixed { color: var(--base2); padding: .4rem 0; font-size: 1.1rem; }
.field--error select, .field--error input { border-color: var(--yellow); border-width: 2px; }
.error { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--base0); border-left: 3px solid var(--yellow); padding-left: .5rem; }
.actions { margin: 1rem 0 0; }
.app-notice { margin: 1rem 0 0; }                 /* a toolbox.css .notice with the app's spacing */

/* --- Results and the working ------------------------------------------------- */
.panel {
  margin: 1.5rem 0 0; padding: 1.1rem 1.4rem; border-radius: var(--radius);
  background: var(--bg-raised); color: var(--text-raised);
  border: 1px solid rgba(88, 110, 117, 0.28); border-top: 3px solid var(--tint, var(--accent));   /* = .card */
}
.panel h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
.panel h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.panel--pending { border-top-color: rgba(88, 110, 117, 0.6); }
.results dl { margin: 0; display: grid; gap: .5rem; }
.result { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid rgba(88, 110, 117, .35); padding-bottom: .4rem; }
.result dt { color: var(--base1); }
.result dd { margin: 0; color: var(--base2); font-family: var(--font-mono); font-size: 1.1rem; }
.result--main dd { font-size: 1.6rem; font-weight: 600; }
.warning { margin: .75rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--orange); color: var(--base1); background: rgba(203, 75, 22, .08); }
.working pre {
  margin: 0; padding: .6rem .8rem; overflow-x: auto; border-radius: var(--radius-sm);
  background: var(--base03); color: var(--base0); font-family: var(--font-mono); font-size: 16px; line-height: 1.7;
}
/* ÷ × − + in the working: bigger, bolder, the strongest text colour, so ÷ can't
   pass for + (Paul, 2026-11-04). Only what follows each = grows. */
.working .op { font-size: 1.25em; font-weight: 700; color: var(--base2); line-height: 1; }

/* 🔴 THE WORKING, EXPLAINED (DiveCalc spec00 §2.1, Paul 2026-11-10): every number and name in the working is a
   TERM, dotted, and pressing, hovering or focusing it shows its two-line explanation (words, then numbers).
   - The dotted line is a text decoration, so a term is exactly as wide as its text and the = signs still line up.
   - 🔴 The explanation is positioned against .working__block, NOT inside the <pre>: the <pre> scrolls sideways
     (overflow-x), and a box positioned inside a scrolling box is clipped. The <pre> and .term stay unpositioned,
     so the explanation opens under the whole block, full width, and never runs off a phone screen.
   - Contrast as the (i)'s: --base1 on --base02 is 4.86:1. No red: it is the suite's error colour. */
.working__block { position: relative; }
.term__btn {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.term__btn:hover { color: var(--base2); }
.term__btn:focus-visible { outline: 2px solid var(--tint, var(--accent)); outline-offset: 1px; }
.term__text {
  display: none; position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + .35rem);
  padding: .6rem .75rem; border-radius: 6px; white-space: normal; text-align: left;
  font: 400 14px/1.45 var(--font);
  background: var(--base02); color: var(--base1); border: 1px solid var(--tint, var(--accent));
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.term__line { display: block; }
.term__line + .term__line { margin-top: .2rem; font-family: var(--font-mono); }
.term:focus-within .term__text { display: block; }
@media (hover: hover) { .term:hover .term__text { display: block; } }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- The footer band: one row of links, like the banner ------------------- */
.appfoot {
  flex: none; margin-top: 3rem;
  background: rgba(7, 54, 66, 0.72);                  /* = .nav */
  border-top: 1px solid rgba(88, 110, 117, 0.35);
}
.appfoot ul {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  gap: clamp(.45rem, 2.5vw, 2.4rem); list-style: none; margin: 0 auto; max-width: var(--wrap-wide);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding: 0 .5rem env(safe-area-inset-bottom, 0px);
}
.appfoot__link { font-size: 12px; letter-spacing: .01em; color: var(--base1); text-decoration: none; white-space: nowrap; }
.appfoot__link:hover { color: var(--base2); text-decoration: none; }
.appfoot__link[aria-current="page"] { color: var(--base3); }
@media (max-width: 389px) {
  .appfoot ul { gap: .4rem; }
  .appfoot__link { font-size: 11px; letter-spacing: 0; }
}

/* --- The first-launch acknowledgement (watb-app.js shows it, once per device) */
.ack[hidden] { display: none; }
.ack {
  position: fixed; inset: 0; z-index: 200;            /* above the banner */
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0, 43, 54, .92);
}
.ack__box {
  max-width: 30rem; padding: 1.5rem; border-radius: var(--radius);
  background: var(--base02); color: var(--base1); border-left: 3px solid var(--tint, var(--accent));
}
.ack__box h2 { color: var(--base2); margin-top: 0; font-size: 1.3rem; }
.ack__box p { color: var(--base1); }
.ack__box strong { color: var(--base2); }
.ack__box button { width: 100%; margin-top: .5rem; }
.ack__note { font-size: 14px; margin-bottom: 0; }