/* ============================================================================
   THE PORTAL LOOK ON THIS APP'S OWN SCREENS (redesign module 07, 2026-10-20) —
   behind "Try the new screens".
   ----------------------------------------------------------------------------
   Everything here is scoped under html.ui-new, the class app.js sets from
   uiNewScreens(), so a person with the switch off sees exactly today's app.
   The portal's own screens (the top bar, the search page) no longer live here:
   they are the portal's markup dressed by the portal's stylesheet, copied as
   written into static/portal/ (see static/portal/SOURCE). This file keeps what
   the switch changes on the screens that are still this app's: the type, sentence
   case, Today's clocks, the sidebar giving way to the portal's bar, and the rows
   of the old search page that stay in the DOM for their handlers.
   Rules that would reach into the portal's markup stop at .portal: the portal's
   headings, its uppercase labels and its form fonts are its own.
   ============================================================================ */
html.ui-new {
  --font-display: "Jost", "League Spartan", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-mono:    "Inter", system-ui, sans-serif;
  --font-names:   "League Spartan", "Jost", system-ui, sans-serif;
}
html.ui-new body { font-family: var(--font-sans); font-size: 14px; }

/* Headings in Jost, a little lighter than the old 800 Poppins (the portal's own carry theirs). */
html.ui-new h1:where(:not(.portal *)), html.ui-new h2:where(:not(.portal *)), html.ui-new h3:where(:not(.portal *)),
html.ui-new .page-title:where(:not(.portal *)), html.ui-new .modal-title:where(:not(.portal *)) {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Names on cards and rows: Jost 700, as the portal's board cards do. League Spartan 800
   is the portal's hero face, kept only for the person page's big name. */
html.ui-new .bd-nm, html.ui-new .cv-nm, html.ui-new .cp-nm, html.ui-new .rp-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
html.ui-new .pp-nm, html.ui-new .pp-name {
  font-family: var(--font-names);
  font-weight: 800;
  letter-spacing: 0;
}

/* Sentence case on this app's screens: the portal writes "High priority", not "HIGH PRIORITY".
   Inline styles in the JS carry text-transform too, hence the !important (it only ever removes
   capitals). Not inside .portal: the portal's eyebrow and "rename" keep the case it gives them. */
html.ui-new *:where(:not(.portal, .portal *)), html.ui-new *:where(:not(.portal, .portal *))::before,
html.ui-new *:where(:not(.portal, .portal *))::after { text-transform: none !important; }

/* Form controls inherit the body face (browsers default them to the system font). */
html.ui-new :is(button, input, select, textarea):where(:not(.portal *)) { font-family: inherit; }


/* The sidebar photo (routers/team_photos.py): the face covers the initial's circle. */
html.ui-new .avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-color: transparent;
}

/* NAVIGATION AND CHROME LIKE THE PORTAL (2026-10-20, Tania: "take the client portal as a
   reference, it feels easier"). The portal's rule: less chrome per screen, one count that
   says what is on you, the active door as a grey pill, empty states as dashed cards that
   name the next step, cards that lift on hover. All of it under the new-screens switch. */
html.ui-new .side-item.active { background: var(--gray-100, #f4f4f5); color: var(--black); border-radius: 10px; }
html.ui-new .side-item.active::before { display: none; }
html.ui-new .side-item { border-radius: 10px; }
html.ui-new .bd-beta { display: none; }
html.ui-new .pri-colempty {
  border: 1.5px dashed var(--line-300, #dddde1); border-radius: 10px; padding: 14px 12px; background: transparent;
}

/* WHAT'S ON ME (2026-10-20): Today's first block, modelled on the portal's home. One tile per
   clock that is broken or about to break, the count inside the door that opens those people;
   a dashed line when nothing is late. priorities.js renders .pri-clocks only under the switch. */
html.ui-new .pri-clocks { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
html.ui-new .pri-clock { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 184px;
  flex: 1 1 184px; text-align: left; font-family: inherit; cursor: pointer; border-radius: 10px; padding: 12px 14px;
  border: 1.5px solid var(--line); background: var(--card); transition: transform .12s, box-shadow .12s; }
html.ui-new .pri-clock:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 16, 40, .10); }
html.ui-new .pri-clock .cnt { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.ui-new .pri-clock .lbl { font-size: 12.5px; font-weight: 600; color: var(--gray-800); }
html.ui-new .pri-clock .verb { font-size: 11.5px; font-weight: 700; color: var(--purple-dark); }
html.ui-new .pri-clock.red { border-color: #f3b2ab; background: #fff5f4; }
html.ui-new .pri-clock.red .cnt { color: #b42318; }
html.ui-new .pri-clock.amber { border-color: #f1d28a; background: #fffaf0; }
html.ui-new .pri-clock.amber .cnt { color: #9a5b00; }
html.ui-new .pri-clock.clear { border-style: dashed; cursor: default; background: transparent; flex: 0 1 auto; }
html.ui-new .pri-clock.clear:hover { transform: none; box-shadow: none; }
html.ui-new .pri-clock.clear .lbl { color: var(--gray-600); font-weight: 500; }
/* The sidebar's one count: the Today badge turns red when it carries late work. */
html.ui-new .side-badge.onme-late { background: #b42318; color: #fff; }

/* THE SIDEBAR GIVES WAY TO THE PORTAL'S BAR (index.html #ptShell, the portal's <header
   class="topbar"> as written, shown by app.js under the switch). */
html.ui-new body { padding-left: 0; }
html.ui-new .side, html.ui-new .side-toggle { display: none; }

/* THE EXTENSION INSTALL BOX (2026-10-20): the portal's add-on box, at the top of the board. Open
   as a card until the first person is saved, then a one-line strip that still opens /extension. */
html.ui-new .bd-extbox[hidden] { display: none; }
html.ui-new .bd-ext-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; padding: 12px 16px;
  border: 1.5px solid var(--hr-purple-300, #c89adc); background: var(--hr-purple-100, #f1e6f6); border-radius: 12px; }
html.ui-new .bd-ext-t { font-size: 13.5px; color: var(--black); white-space: nowrap; }
html.ui-new .bd-ext-v { font-family: var(--font-mono); font-size: 12px; color: var(--hr-purple-700, #76318f); font-weight: 600; }
html.ui-new .bd-ext-w { flex: 1 1 320px; font-size: 12.5px; color: var(--gray-600, #52525b); line-height: 1.4; }
html.ui-new .bd-ext-btn { white-space: nowrap; text-decoration: none; }
html.ui-new .bd-ext-strip { font-size: 12px; color: var(--gray-500, #71717a); margin: 6px 0 2px; }
html.ui-new .bd-ext-link { color: var(--hr-purple, #9140b0); font-weight: 600; text-decoration: underline; }
html.ui-new .bd-ext-upd { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #b42318; color: #fff; vertical-align: middle; }

/* THE OLD ROWS OF THE SEARCH PAGE stay in the DOM for their handlers (the portal's page
   clicks them); nothing of them shows. */
html.ui-new #bdTopSourcer, html.ui-new #bdSortTop, html.ui-new #bdSelBtn, html.ui-new #bdTracks { display: none; }
html.ui-new .bd-where, html.ui-new .bd-head, html.ui-new .bd-kpiline, html.ui-new .bd-subtabs, html.ui-new .bd-workrow,
html.ui-new .bd-meta, html.ui-new #bdEarn, html.ui-new .bd-tierchips, html.ui-new .bd-tblbar { display: none; }
html.ui-new .pb-off { display: none !important; }

/* THE TABLE TAB keeps this app's table (.bd-tbl); its rows wear the card's step button. */
html.ui-new .bd-rowacts { align-items: center; gap: 6px; }
html.ui-new .bd-rowacts .bd-pc-go { min-height: 0; padding: 6px 12px; }
html.ui-new .pb-fitcell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
html.ui-new .bd-fitmark { font-size: 11px; font-weight: 600; }
html.ui-new .bd-fitmark.green { color: #1a7f37; }
html.ui-new .bd-fitmark.red { color: #b42318; }
html.ui-new .bd-fitmark.amber { color: #9a6700; }

/* The extension prompt under the new screens: the portal's add-on card (notes.html .nts-addon)
   on the portal's .card, with its summary row, its steps list and its code chips. */
html.ui-new .ext-prompt { max-width: var(--container-lg, 1200px); margin: 16px auto 0; padding: 0 var(--space-5, 24px); }
html.ui-new .ext-pc { display: block; padding: 16px; }
html.ui-new .ext-pc summary { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; list-style: none; border-radius: 12px; }
html.ui-new .ext-pc summary::-webkit-details-marker { display: none; }
html.ui-new .ext-pc .ext-p-txt { flex: 1; min-width: 0; }
html.ui-new .ext-pc .ext-p-txt strong { display: block; font-size: 16px; }
html.ui-new .ext-pc .ext-p-t { display: block; color: var(--ink-500); font-size: var(--text-sm); margin-top: 2px; }
html.ui-new .ext-pc ol { margin: 14px 0 8px; padding-left: 20px; display: grid; gap: 8px; font-size: var(--text-sm); }
html.ui-new .ext-pc code { font-size: .9em; background: #f3eef6; padding: 1px 6px; border-radius: 6px; }
html.ui-new .ext-pc .ext-p-st { font-size: var(--text-xs); color: var(--ink-500); }