/* The house style, in one place.
 *
 * Written 23 Sep 2026, after the lesson plan design pass. That pass settled a
 * handful of rules and they have to be the same on every screen, so they live
 * here rather than being copied into sixteen <style> blocks. Linked AFTER each
 * screen's own styles, like hub-theme.css, so these win.
 *
 * The rules, and why each one exists:
 *
 *   BUTTONS ARE A HIERARCHY, NOT A PALETTE. Four teal fills on one screen read
 *   as four equal decisions when only one is. A screen has ONE filled primary
 *   (Turn in, Return to trainee); .btn-gold is a card-level action; .btn-quiet
 *   is an undo; .btn-add adds a row; .btn-print is a link, not a button.
 *
 *   GOLD CARRIES STRUCTURE. Table header bands and the "you write this" cue.
 *   Teal stays for the decision and for a person's own writing.
 *
 *   A SELECT LOOKS LIKE A CONTROL. Gold left edge, a real chevron instead of
 *   the browser's, and the same height as any button beside it.
 *
 *   AN ACTION BAR HAS TWO SIDES. The decision and its consequence on the left,
 *   the quiet things on the right -- never a sentence sandwiched between two
 *   buttons.
 *
 * EVERY var() HERE CARRIES A FALLBACK, and that is not tidiness. The base
 * palette is declared per screen, in each screen's own :root, and five
 * screens (8, 9, 10, 11, 15) never declared --gold or --gold-lifted, three
 * never declared --ink-warm. A var() with no fallback and no value makes the
 * whole declaration invalid, so `border:1.5px dashed var(--gold, oklch(63% 0.096 72))` simply did
 * not draw -- the dashed chip on the assignment wording screen came out with
 * no border at all. Declaring the palette in this file instead would be
 * worse: it loads last, so it would overwrite any screen that means to
 * differ.
 *
 * NOT the printed documents. Those are Cambridge-facing and keep their own
 * header colours (Ramy, 23 Sep 2026: "leave the printed documents alone").
 */

:root{
  /* The fill of every field, and the focus lift. It lived only as a fallback
     repeated at fifteen call sites, which made it unchangeable in one place
     and, once changed, a set of comments that disagreed with themselves. It
     is declared here, where the rule that governs it lives, and the fallbacks
     below still carry the same value so a screen that somehow loads without
     this file looks the same.
     90%, not 93.4%: at 93.4 a field sat under two points from the 95.2% card
     behind it and the border was doing all the work of saying "type here"
     (Ramy, 26 Sep 2026). */
  --field:oklch(90% 0.032 84);
  --field-focus:oklch(93.5% 0.024 84);
  /* The placeholder, on that fill. --grey (51%) measured 4.25 against it --
     it cleared 4.5 on the old, lighter field and stopped clearing it when the
     field went darker, which is the kind of thing a tint change takes with it
     quietly. 49% is the lightest that clears, at 4.66. --grey itself is
     unchanged: it is right everywhere else, on the cards. */
  --field-ph:oklch(49% 0.017 70);
  --gold-deep:oklch(52% 0.098 70);
  --gold-wash:oklch(94.5% 0.035 78);
  --teal-lifted:oklch(44% 0.062 195);
}

/* ---- buttons ---------------------------------------------------------- */
.btn-gold{background:var(--gold, oklch(63% 0.096 72)); color:var(--ink-warm, oklch(30% 0.042 58)); font-weight:700; border:none;}
.btn-gold:hover{background:var(--gold-lifted, oklch(70% 0.12 72));}
/* A filled button LIFTS. It used to fade to 88% opacity on five screens,
   which greys the label as well as the fill, and four more filled buttons had
   no hover at all. Border lifts with the fill, or a dark edge rings a lighter
   face. Ramy, 24 Sep 2026. */
.btn-teal:hover, .btn-submit:hover, .btn.primary:hover{
  background:var(--teal-lifted, oklch(44% 0.062 195)); border-color:var(--teal-lifted, oklch(44% 0.062 195));}
.btn-quiet{background:none; color:var(--grey, oklch(51% 0.017 70)); border:1.5px solid var(--sand-line, oklch(89.5% 0.012 82));}
.btn-quiet:hover{border-color:var(--grey, oklch(51% 0.017 70)); color:var(--ink, oklch(23.5% 0.017 65));}
.btn-add{background:none; border:1.5px dashed var(--gold, oklch(63% 0.096 72)); color:var(--gold-deep); font-weight:700;
  border-radius:20px; padding:9px 20px; font-family:'Karla',sans-serif; font-size:0.84rem; cursor:pointer;}
.btn-add:hover{background:var(--gold-wash);}
.btn-add:disabled{opacity:.5; cursor:not-allowed;}
/* button.btn-print, not .btn-print: hub-record.css styles `.actions button`
   as a filled pill, which is (0,1,1) and beats a bare class -- the record and
   course-record screens came out with a filled background behind the link.
   Matching that specificity and loading last is what wins. */
button.btn-print{background:none; border:none; color:var(--grey, oklch(51% 0.017 70)); font-family:'Karla',sans-serif;
  font-size:0.82rem; font-weight:600; cursor:pointer; padding:6px 2px;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold, oklch(63% 0.096 72));}
button.btn-print:hover{color:var(--ink-warm, oklch(30% 0.042 58));}
/* A phone: it is a link, but it still has to be hit with a thumb. */
@media screen and (max-width:560px){ button.btn-print{min-height:44px;} }

/* ---- a select that looks like a control -------------------------------- */
.house-sel{position:relative; display:flex;}
.house-sel select{appearance:none; -webkit-appearance:none; width:100%;
  font-family:'Karla',sans-serif; font-size:0.92rem; font-weight:600;
  padding:0 40px 0 14px; height:46px; min-height:46px;
  border:1.5px solid var(--sand-line, oklch(89.5% 0.012 82)); border-left:4px solid var(--gold, oklch(63% 0.096 72)); border-radius:6px;
  background:var(--field, oklch(90% 0.032 84)); color:var(--ink, oklch(23.5% 0.017 65)); cursor:pointer;}
.house-sel select:hover{border-color:var(--gold, oklch(63% 0.096 72));}
.house-sel select:focus{outline:none; border-color:var(--gold-deep);}
.house-sel::after{content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;}

/* ---- small tabs are underlined, not ringed ----------------------------- */
/* Ramy, 24 Sep 2026: "all the small tabs should not have a hovering effect,
   doesn't look good -- should be underlined in a different colour instead."
   They are <button>s, so the shared rule was painting a sand block behind them
   and ringing them. Both are off them now (hub-shared.js), and hovering shows
   the underline the ACTIVE tab wears, in gold rather than teal -- so the two
   never say the same thing. The active tab keeps its own and does not move.
   Tabs on screens 5, 6 and 7 all carry `border-bottom:2px solid transparent`,
   which is what this colours; the tracker's filters have no border, so they
   take an underline of the same weight and offset instead. */
.tab:not(.active):not(.on):hover{ border-bottom-color:var(--gold, oklch(63% 0.096 72)); }
.filter:not(.on):hover{ text-decoration:underline; text-decoration-color:var(--gold, oklch(63% 0.096 72));
  text-decoration-thickness:2px; text-underline-offset:5px; }
/* The segmented controls in the tracker's candidate strip, the same way (Ramy,
   24 Sep 2026). They are 11px inside a bordered group, so the underline sits
   closer in than a tab's or it meets the group's own edge. The chosen segment
   keeps its fill and takes nothing on hover: the fill is what it is saying. */
.sg:not(.on):hover{ text-decoration:underline; text-decoration-color:var(--gold, oklch(63% 0.096 72));
  text-decoration-thickness:2px; text-underline-offset:3px; }

/* ---- a stored table stacks on a phone ---------------------------------- */
/* Paired with hubStackTables in hub-shared.js, which puts each cell's column
   name in data-l. Screen only, and only under 640px: A4, print and every
   laptop keep the table. The cells carry inline borders and padding from the
   generator, which is why these have to shout. */
@media screen and (max-width:640px){
  table.hub-stack, table.hub-stack > tbody, table.hub-stack > tbody > tr,
  table.hub-stack > tr, table.hub-stack td, table.hub-stack th{
    display:block !important; width:auto !important;}
  table.hub-stack > tbody > tr:first-child, table.hub-stack > tr:first-child{ display:none !important; }
  table.hub-stack > tbody > tr, table.hub-stack > tr{
    border:1px solid var(--sand-line, oklch(89.5% 0.012 82)) !important;
    border-left:4px solid var(--gold, oklch(63% 0.096 72)) !important;
    border-radius:6px; margin:0 0 10px; padding:9px 11px;
    background:var(--surface, oklch(95.2% 0.018 84)));}
  table.hub-stack td, table.hub-stack th{
    border:0 !important; padding:5px 0 !important; text-align:left !important;}
  table.hub-stack td[data-l]::before{
    content:attr(data-l); display:block; margin-bottom:2px;
    font-family:'Karla',sans-serif; font-size:0.66rem; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
    color:var(--grey, oklch(51% 0.017 70));}
  table.hub-stack td[data-full]{ font-weight:700; }
  table.hub-stack td:empty{ display:none !important; }
  /* A cell centred its contents with auto margins; stacked, that leaves the
     pill adrift in the middle of its own line while every label is left. */
  table.hub-stack td > *{ margin-left:0 !important; margin-right:auto !important; }
}

/* ---- a field is filled, not white ------------------------------------- */
/* Ramy, 24 Sep 2026: "it doesn't have to be white... a nicer colour, for all
   of them, contrasted, that makes it pop." --box had been set to the SAME tone
   as --card, so a text box sat on a card with no edge to speak of, and the
   native selects beside it stayed browser-white. One fill for every kind of
   field, a step deeper than the card, so a box is a box wherever it appears.
   Printed documents keep their plain page: the print block below undoes it. */
input[type=text], input[type=number], input[type=url], input[type=date], input[type=time], input[type=datetime-local],
input[type=search], input[type=email], select, textarea, .house-sel select{
  background:var(--field, oklch(90% 0.032 84)); color:var(--ink, oklch(23.5% 0.017 65));}
input[type=text]:focus, input[type=number]:focus, input[type=url]:focus, input[type=date]:focus, input[type=time]:focus,
input[type=datetime-local]:focus, input[type=search]:focus, input[type=email]:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold, oklch(63% 0.096 72)); background:var(--field-focus, oklch(93.5% 0.024 84));}
input::placeholder, textarea::placeholder{ color:var(--field-ph, oklch(49% 0.017 70)); opacity:1; }
/* Chrome gives ::placeholder a default opacity that would undo the colour. */
@media print{ input, select, textarea{ background:transparent !important; } }

/* ---- the action bar has two sides -------------------------------------- */
.actionbar{justify-content:space-between; gap:18px;}
.actionbar .lhs{display:flex; align-items:center; gap:14px; min-width:0; flex-wrap:wrap;}
.actionbar .rhs{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.actionbar .barhint{font-size:0.78rem; line-height:1.4; max-width:380px;}
.actionbar .status{font-size:0.78rem; color:var(--gold-deep); font-weight:600;}
.actionbar .btn-submit{flex:none;}

/* ---- "you write this" -------------------------------------------------- */
.aim-cue{font-size:0.72rem; font-style:italic; color:var(--gold-deep); margin:6px 0 0;
  display:flex; align-items:center; gap:6px; line-height:1.3;}
.aim-cue::before{content:""; width:12px; height:1.5px; background:var(--gold, oklch(63% 0.096 72)); flex:none;}
.aim-cue.done{display:none;}

@media print{ .btn-add,.btn-print,.aim-cue{display:none !important;} }