/* ============================================================================
   DiveCalc (Scuba Diving Formulas): ONLY what is DiveCalc's own.

   🔴 ONE SUITE (Paul, 2026-11-04). Everything shared comes from the parent:
        /assets/css/toolbox.css   the site (type, .wrap, .card, .badge, .notice)
        /assets/css/watb-app.css  every app (banner, trail, pills, (i), forms,
                                  panels, the working, footer band, acknowledgement)
      Nothing here may restate a token or restyle a shared part. If two apps
      need it, it belongs in watb-app.css.
   ========================================================================= */

/* The launch cards: SITE cards (.card), with three tiers of name (Paul,
   2026-11-04). Lines 1 and 2 stay on one line; line 3 wraps. */
.dc-card { gap: .35rem; }
.dc-card__title, .dc-card__long { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-card .dc-card__long { color: var(--text-strong); font-weight: 600; font-size: 14px; }
.dc-statement { margin-top: 2.5rem; }

/* "I think this is an error" (Paul, 2026-11-07): at the end of The working, only while a
   result is on screen (and not stale), so no screen draws or hides it itself. */
.dc-report { display: none; margin: .25rem 0 1.75rem; }
#dc-dynamic:has(.working:not([hidden])) ~ .dc-report { display: block; }
.dc-report summary { cursor: pointer; font-size: 14px; color: var(--base1); }
.dc-report summary:hover { color: var(--base2); }
.dc-report__box { display: grid; gap: .4rem; margin-top: .75rem; max-width: 36rem; }
/* The app's text-field look (watb-app.css styles only selects and type="text"). */
.app .dc-report__box textarea, .app .dc-report__box input[type="email"] {
  width: 100%; box-sizing: border-box; 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;   /* = watb-app.css */
}
.app .dc-report__box textarea:focus, .app .dc-report__box input[type="email"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.dc-report__box label { font-size: 14px; }
.dc-report__note { margin: 0 0 .25rem; font-size: 14px; }
.dc-report--sent { font-size: 14px; }

/* The stages (Paul, 2026-11-06): β live, α being built, both clickable. */
.dc-card { position: relative; }
.dc-stage { font-size: 19px; font-weight: 700; line-height: 1; }
.dc-card > .dc-stage { position: absolute; top: .9rem; right: 1rem; }
.dc-card > .dc-stage ~ .dc-card__title { padding-right: 1.5rem; }
.dc-stage--beta { color: var(--accent-air, #2aa198); }
.dc-stage--alpha { color: #b58900; }
.dc-key { margin: 0 0 1.2rem; font-size: 14px; }
.dc-key .dc-stage { font-size: 16px; }
.dc-signin-hint { margin: 1.2rem 0 0; }
.appmenu .dc-stage { font-size: 14px; }
.appmenu .appmenu__planned { display: block; padding: .4rem .9rem; font-size: 14px; color: var(--base1); opacity: .45; cursor: default; }
/* Planned cards: there, so the list is whole, but grey and not a link. */
.dc-card--planned { opacity: .5; filter: grayscale(1); border-top-color: rgba(88, 110, 117, 0.6); }

/* A formula's heading: three tiers and its tags at the left, settings at the right. */
.dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.dc-head h1 { margin: 0 0 .25rem; }
.dc-head__long { margin: 0 0 .25rem; color: var(--text-strong); font-weight: 600; font-size: 15px; }
.dc-head__line { margin: 0 0 .6rem; font-size: 15px; }

/* Best mix: a mix result has its check of the ROUNDED mix under it (spec02 §4). */
.results .result { flex-wrap: wrap; }
.result__check { flex-basis: 100%; margin: .15rem 0 0; font-size: 14px; color: var(--base1); font-family: var(--font-mono); }

/* A tick box (2026-11-08, Gas Planning (Rock)): the size of a finger, left-aligned like the other controls. */
.app .field input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: .25rem 0; accent-color: var(--blue); }