/* ============================================================
   POST-MOCKUP PATCHES

   Approved changes made AFTER the mockup was locked, kept in their own file so
   juq.css stays a byte-for-byte copy of the approved stylesheet and can never
   drift. Load this AFTER juq.css.

   Rule: if a change belongs in the design itself, it goes in the mockup and
   gets re-extracted. This file is only for things agreed in review afterwards.
   ============================================================ */

/* Text sitting ON an accent fill (buttons, tags) is white in every skin.
   Requested in review: "all the text inside orange buttons should be white",
   for dark and spicy especially, where --accent-ink is near-black.
   --accent-ink stays the SURFACE pairing, so the announcement bar keeps its
   dark type on orange. */
:root { --btn-ink: #ffffff; }

.btn { color: var(--btn-ink); }
.spot-tag { color: var(--btn-ink); }

/* A DISABLED .btn LOOKED EXACTLY LIKE AN ENABLED ONE. juq.css never gave .btn
   a :disabled state at all, so a button that cannot be pressed still shone in
   full accent orange with its shadow on, and the only feedback for clicking it
   was nothing happening.

   Not a nizonics quirk: it is a missing base state, and every page that needed
   one had quietly invented its own private version, .wh-spin:disabled,
   .hl-btn:disabled and .dp-c:disabled, each with different numbers.

   THE FILL COMES OFF RATHER THAN GOING DIM. This is the wheel's treatment,
   promoted here, and its reasoning was right: a faded accent block is still an
   accent block. At 40% opacity the button you cannot press is still the
   loudest, most orange thing on the screen and still reads as the thing to
   click. Dropping the fill and the shadow entirely makes it read as inert
   instead of merely quiet. pointer-events: none as well, so the hover press-in
   cannot fire on a button that does nothing. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line-strong);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* GHOST BUTTONS NEVER PRESSED IN. A cascade bug, not a design choice:
   juq.css declares `.btn:hover { box-shadow: 0 0 0 transparent }` and then
   `.btn.ghost { ... box-shadow: 5px 5px 0 var(--line-strong) }` on the NEXT
   line, at equal specificity. Later wins, so hover never took a ghost button's
   shadow away. It translated 5px with the shadow still attached, and the whole
   shape slid across instead of pressing into a shadow that stays put.

   Restated here in the right order, and with the solid button's --ink shadow
   rather than the dimmer --line-strong, so a row of buttons reads as one
   component that differs only in colour. Sweet has the same bug on the same two
   lines and gets the same treatment. */
/* ============================================================
   NAVBAR CONTROLS

   The live chip, the JuqBuqs chip and the account button sit in one row and
   were each built to their own metrics: two mono and one display-italic, two
   different text-glyph carets at two different sizes, and every one of them
   spacing its parts with a literal   ON TOP of the flex gap. That doubled
   spacing is where the hole before the live chip's arrow came from.

   One set of metrics, one caret, one leading marker each: a status dot, the
   bank, an avatar. ============================================================ */

.nav-right .chip,
.nav-right .acct-btn { height: 34px; padding: 0 10px; gap: 7px; }
.nav-right .acct-btn { padding-left: 5px; }
/* The odd one out was the only one in display-italic. */
.nav-right .acct-name {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  font-style: normal; letter-spacing: 0.04em;
}

/* ONE caret, DRAWN rather than typed. `▾` is a different shape and weight in
   every font, and at 10-11px it stops reading as an arrow at all. Two borders
   on a rotated box are crisp at any size and identical in all three. */
.livebtn-cv,
.up-past-cv,
.nav-right .caret {
  font-size: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 10px; height: 10px; color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.livebtn-cv::after,
.up-past-cv::after,
.nav-right .caret::after {
  content: ''; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.livebtn:hover .livebtn-cv,
.up-past:hover .up-past-cv,
.nav-right .acct-btn:hover .caret,
.nav-right .juqbal-btn:hover .caret { color: var(--ink); }
/* Driven by aria-expanded, which the buttons now actually set: the state is
   announced and styled from one source instead of two. */
.livebtn.open .livebtn-cv,
.up-past[aria-expanded="true"] .up-past-cv,
.nav-right [aria-expanded="true"] .caret { transform: rotate(180deg); }

/* LIVE is worth an accent. OFFLINE is not news, and painting it the same
   attention colour was the loudest thing in the navbar for no reason. */
.livebtn b { color: var(--accent); }
.livebtn b.off { color: var(--ink); }
/* A dot in both states, so the control keeps its shape when he goes live and
   the row does not reflow around it. */
.livebtn-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted); }
.livebtn-since { color: var(--muted); }

/* ---------- the three dropdowns ----------
   The forecast and JuqBuqs panels fade and slide down on the same curve. The
   profile panel was `display: none` -> `display: block`, which cannot animate,
   so it popped. Same open state as the other two, so all three arrive the same
   way.

   VISIBILITY IS PART OF THE FIX, not a flourish. Dropping `display: none` would
   leave the closed panel in the document and reachable by Tab, which is a
   regression the other two already had: `pointer-events: none` stops the mouse
   and nothing stopped the keyboard. Hidden while closed, and the transition is
   delayed to the end of the fade so it does not vanish mid-animation. */
.settings, .juqbal-pop, .fcpop {
  display: block;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    transform 0.24s cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 0.24s;
}
.settings {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.settings.open, .juqbal-pop.open, .fcpop.open {
  visibility: visible;
  transition:
    opacity 0.22s ease,
    transform 0.24s cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s;
}
.settings.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.btn.ghost { box-shadow: 5px 5px 0 var(--ink); }
.btn.ghost:hover { box-shadow: 0 0 0 transparent; }
[data-skin="sweet"] .btn.ghost { box-shadow: 0 9px 22px var(--shadow); }
[data-skin="sweet"] .btn.ghost:hover { box-shadow: 0 16px 34px var(--shadow); }

/* Form controls do not inherit font or colour by default: a <button> falls back
   to the browser's own black text, which is invisible on a dark surface. The
   mockup never hit this because every button there set its own colour, but any
   card built as a <button> (the pantry grid) rendered black on dark.
   Buttons that set their own colour still win, this is only the base. */
button, input, textarea, select { font-family: inherit; }
button { color: inherit; }

/* The announcement strip drew a hard rule along its bottom edge in --ink, which
   is near-white on the dark skins, so a white bar cut across the page under the
   orange band. Removed in review. The mockup already did exactly this for the
   sweet skin, so this makes every skin agree rather than inventing anything. */
.anno { border-bottom-color: transparent; }

/* An event icon can be an uploaded photo or a 7TV emote, so it must be
   constrained by HEIGHT with width auto. Without this an uploaded image
   renders at its natural size and stretches the card header. */
.spot-ic img { height: 26px; width: auto; display: block; border-radius: 2px; }
.spot-litem .spot-ic img { height: 22px; }


/* The page must not shift when the scrollbar comes and goes.

   juq.css deliberately reserves no gutter, so a bar exists only when there is
   something to scroll. The cost is that every appearance and disappearance
   resizes the viewport by 11px and nudges the whole layout sideways: navigating
   between a long page and a short one, filtering a grid down to a few results,
   and - most visibly - opening any modal, because locking the body scroll
   removes the bar and the page jumps as it does.

   `scrollbar-gutter: stable` reserves the space permanently on the root, so the
   content box never changes width. Only the root: reserving a gutter inside
   every scrollable panel would waste 11px in a lot of small boxes to fix a
   shift nobody notices there.

   The trade is a always-present empty channel on short pages, which is the
   right way round - a stripe that is always there reads as part of the frame,
   where a layout that moves reads as a fault. Browsers without support ignore
   it and behave exactly as they do today. */
html { scrollbar-gutter: stable; }

/* ---------- back to top ----------

   Added to every page by site.js, so no page owns it and none can forget it.

   It sits inside the reserved scrollbar gutter's edge rather than over the
   bar: `position:fixed` measures from the viewport, which already excludes a
   classic scrollbar, so a plain right offset lands beside it and never on it.

   z-index 60 is above the sticky navbar (40) and below the modal layer (85),
   which is what makes it disappear correctly behind an open dialog instead of
   floating on the backdrop. Toasts are bottom-CENTRE, so nothing collides. */
.juq-top {
  position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 60;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  cursor: pointer; font: inherit;
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--muted);
  /* Hidden until earned. `visibility` as well as opacity, so it is not a
     transparent click target sitting over the page's bottom-right corner. */
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.juq-top.on { opacity: 1; visibility: visible; transform: none; }
.juq-top:hover { border-color: var(--accent); color: var(--accent); }
.juq-top svg { width: 17px; height: 17px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .juq-top { transition: none; }
}

/* ---------- PTO headline ----------
   "7.5 PTO days | 1 half-day", all on the number's line.

   The cap used to be capped at 13ch with the half-day note joined on behind a
   middle dot, so it wrapped mid-phrase into "PTO DAYS ·" above "3 HALF-DAYS":
   two fragments, neither of which is a sentence. Lifting the cap lets the
   whole thing sit on one line, and the rule is a real divider between two
   separate counts rather than a dot that read as an ellipsis.

   The bar is a ::before because it is punctuation between two facts, not part
   of either: it must never end up in a copied selection or read out as a
   character by a screen reader. */
.pto-cap { max-width: none; }
.pto-cap em { font-style: normal; opacity: 0.75; }
.pto-cap em::before { content: '|'; margin: 0 0.5em; opacity: 0.45; }