/* =============================================================================
   look2.css · the look, three upgrades (28 Sep 2026)
   Joe: "make 3 major upgrades to our dashboards look, make it look more
   appealing to the human eyes."

   Same brand, calmer delivery. Nothing here changes a colour token, a word or
   a button's job; it only changes how the existing pieces are drawn. Loaded
   LAST by dashboard.php only, so every rule here wins over app.css,
   board.css, proposals.css and jetsy20.css without touching them. Delete this
   one file (or its <link>) and the dashboard is exactly as it was.

   1. THE TOP OF TODAY. The numbers were one line of tiny mono caps
      ("3 NEED YOU · 131 CALLS THIS MONTH · 312 MIN USED") that had to be
      read like a ticker. They are now tiles: the number big, the words under
      it in plain case. "As of" and "Answering" sit above them as small chips.
      The app bar's Español / Sign out were two tall outlined boxes as loud as
      the logo; they are quiet chips now (still 44px to tap).

   2. THE CARDS. More air, rounder, a soft shadow so each card sits on the
      page instead of on a flat sheet, and the small grey labels in card
      headers ("NOTHING BOOKED TODAY OR TOMORROW") in normal words instead of
      spaced capitals. The corner brackets stay — they are Jetsy's — just
      quieter. Orange keeps its one job: what needs you.

   3. THE BOTTOM BAR. Two rows of four, each as tall as a thumb, took about a
      sixth of the screen. Same eight tabs, same order, same two rows, but
      tighter, with the words in plain case, and the tab you are on shown by a
      soft orange pill behind its icon instead of a thin line at the top.

   Tap targets stay ≥44px everywhere. Text pairings checked against the navy
   grounds they sit on (see the audit note at the bottom).
   ========================================================================== */

/* ------------------------------------------------------------ 1 · the top -- */

/* app bar: lighter buttons */
html body .appbar .b.sm{min-height:44px;padding:.25rem .7rem;font-family:inherit;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;text-transform:none;
  color:var(--ink2);background:rgba(255,255,255,.05);box-shadow:none;border-radius:999px}
html body .appbar .b.sm:hover,html body .appbar .b.sm:active{color:var(--ink);
  background:rgba(255,106,26,.14);box-shadow:none}
html body .appbar .who .pl{letter-spacing:.08em}

/* the status bar above the app bar: calmer */
html body .demobar{font-size:.8rem;line-height:1.45}
html body .demobar b{letter-spacing:.1em}

/* the HUD becomes a row of tiles */
html body #main .hud{display:flex;flex-wrap:wrap;align-items:stretch;gap:.55rem;margin:1.1rem 0 .2rem;
  overflow:visible;font-family:inherit;letter-spacing:0;text-transform:none;
  font-size:.75rem;line-height:1.3;color:var(--muted)}
html body #main .hud .hud-r::before,html body #main .hud .hud-r::after{content:none}
html body #main .hud .hud-r{position:static;white-space:normal}

/* the small chips: "as of 5:35 PM" and "Answering" */
html body #main .hud .asof,html body #main .hud .hud-on{order:0;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.05);font-size:.72rem;color:var(--muted)}
html body #main .hud .asof b{font-weight:600;color:var(--ink2)}
html body #main .hud .hud-on{background:rgba(62,213,152,.12);color:var(--ok)}
html body #main .hud .hud-on b{font-weight:600;color:var(--ok)}
html body #main .hud .hud-k{text-transform:none}
/* a line break between the chips and the tiles */
html body #main .hud::after{content:"";flex-basis:100%;height:0;order:1}

/* the tiles: the number is the point */
html body #main .hud .hud-r:not(.asof):not(.hud-on){order:2;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  padding:.75rem .8rem .7rem;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:.74rem;font-weight:500}
html body #main .hud .hud-r:not(.asof):not(.hud-on) b{font-size:1.7rem;line-height:1;
  font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
/* what needs him is the one orange tile */
html body #main .hud .hud-need{background:linear-gradient(180deg,rgba(255,106,26,.16),rgba(255,106,26,.05)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.45) !important}
html body #main .hud .hud-need b{color:var(--or-lt) !important}

/* the greeting: a touch more room around it */
html body #main .greet{padding:.85rem 0 .35rem}
html body #main .greet .hi{font-size:1.65rem}
html body #main .greet .sub{font-size:.92rem;line-height:1.45}

/* ---------------------------------------------------------- 2 · the cards -- */

html body .bc{border-radius:18px;margin:.95rem 0;
  box-shadow:inset 0 0 0 1px var(--line),0 14px 28px -18px rgba(0,0,0,.9)}
html body .bc::before,html body .bc::after{opacity:.55}
html body .bc-hd{padding:1rem 1.1rem .55rem}
html body .bc-hd h2{font-size:1.06rem;letter-spacing:-.015em}
html body .bc-hd .sub{font-family:inherit;font-size:.78rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted)}
html body .bc-bd{padding:0 1.1rem 1.1rem}
/* the pinned cards keep their orange ring, now with the same depth */
html body .bc.pin{box-shadow:inset 0 0 0 1px rgba(255,106,26,.38),0 14px 28px -18px rgba(0,0,0,.9)}

/* the Needs-you items on Today: same depth, rounder, more room */
html body .needs{gap:.8rem}
html body .need{border-radius:18px;padding:1rem 1.05rem;
  box-shadow:inset 0 0 0 1px var(--line),0 14px 28px -18px rgba(0,0,0,.9)}
html body .need::before,html body .need::after{opacity:.55}

/* -------------------------------------------------------- 3 · the tab bar -- */

html body .tabs{border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,26,40,.97),rgba(5,9,15,.99))}
html body .tabs .in{padding:.3rem .35rem .1rem;row-gap:0}
html body .tb{min-height:44px;padding:.12rem .15rem .16rem;gap:.08rem}
html body .tb svg{width:20px;height:20px;padding:2px 14px;box-sizing:content-box;
  border-radius:999px;transition:background-color .15s}
html body .tb span{font-family:inherit;font-size:.66rem;font-weight:600;letter-spacing:.01em;
  text-transform:none;line-height:1.2}
html body .tb[aria-selected="true"]::before,
html body .tabs .tb:nth-child(n+5)[aria-selected="true"]::before{content:none}
html body .tb[aria-selected="true"] svg{background:rgba(255,106,26,.17);filter:none}
html body .tb[aria-selected="true"] span{color:var(--or-lt);text-shadow:none}
html body .tb:nth-child(n+5){box-shadow:none}
html body .tb .badge{top:.05rem;transform:translateX(1.3rem);border-radius:999px}

/* ------------------------------------------------------------ audit note --
   Pairings introduced here, measured against the darkest ground each sits on
   (#0C1826 console / #05090F void), WCAG 2.x:
     --ink   #E9F2FB on #0C1826 ........ 15.6:1
     --ink2  #B4C8DC on #0C1826 ........ 10.2:1
     --muted #7B94AC on #0C1826 ........  5.6:1
     --or-lt #FFB259 on tile (#2A2420≈) .  9.1:1
     --ok    #3ED598 on chip (#10302A≈) .  8.4:1
   ========================================================================== */