/* ============================================================================
   AU ONE ERP · msched-year.css
   PRESENTATION ONLY — the Site Form's year calendar and the project tab bar.
   No data, no logic, no schema. Removing this <link> restores the previous
   appearance exactly; every rule is scoped to .msyear* or .pdtab*.
   ============================================================================ */

/* ── YEAR AT A GLANCE · 4 columns x 3 rows ────────────────────────────────
   The shape people already read a year in. Fixed 4 tracks rather than
   auto-fit so the grid stays a recognisable calendar instead of reflowing
   into an arbitrary number of columns at every width. */
.msyear{
  border:1px solid var(--line); border-radius:16px; background:var(--paper2);
  padding:13px 14px 15px; margin:0 2px 14px;
}
.msyearhd{ display:flex; align-items:center; gap:8px; margin-bottom:11px; flex-wrap:wrap; }
.msyearhd b{ font-size:13px; font-weight:850; letter-spacing:-.2px; color:var(--ink); }
.msyearhd svg{ width:15px; height:15px; color:var(--olive-d); flex:none; }
.msyearhint{ font-size:11px; color:var(--muted); margin-left:auto; }

.msyeargrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }

.msytile{
  position:relative; display:flex; flex-direction:column; gap:7px;
  padding:11px 11px 10px; min-width:0; text-align:left;
  border:1px solid var(--line2); border-radius:13px;
  background:var(--paper3); color:var(--ink);
  font:inherit; cursor:pointer; overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s, box-shadow .16s, background .16s;
}
/* the sheen only exists to travel on hover; it is inert at rest */
.msytile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-120%); transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.msytile:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--olive-rgb,111 125 51),.5);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.6);
  background:var(--paper2);
}
.msytile:hover::after{ transform:translateX(120%); }
.msytile:active{ transform:translateY(0) scale(.985); }
.msytile:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }
.msytile.empty{ opacity:.62; }
.msytile.past{ opacity:.82; }
.msytile.past:hover, .msytile.empty:hover{ opacity:1; }
/* the running month is the one thing on this grid that should find your eye */
.msytile.now{
  border-color:var(--olive);
  background:linear-gradient(165deg,rgba(var(--olive-rgb,111 125 51),.14),var(--paper3));
  box-shadow:0 0 0 1px rgba(var(--olive-rgb,111 125 51),.35);
}
.msytile.done{ border-color:color-mix(in srgb,var(--ok) 45%,transparent); }

.msytop{ display:flex; align-items:center; gap:6px; }
.msytop b{ font-size:12.5px; font-weight:850; letter-spacing:.02em; text-transform:uppercase; }
.msynow{
  font-style:normal; font-size:8.5px; font-weight:850; letter-spacing:.06em;
  padding:2px 6px; border-radius:999px; background:var(--olive); color:#fff;
}
.msydot{ width:7px; height:7px; border-radius:50%; margin-left:auto; flex:none; }
.msydot.ok{ background:var(--ok) } .msydot.bad{ background:var(--bad) }
.msydot.draft{ background:var(--amber) } .msydot.none{ background:var(--line2) }

.msyring{ position:relative; width:44px; height:44px; align-self:center; }
.msyring svg{ width:44px; height:44px; display:block; }
.msyr-bg{ fill:none; stroke:var(--line2); stroke-width:4; }
.msyr-fg{
  fill:none; stroke:var(--olive); stroke-width:4; stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1);
}
.msytile.done .msyr-fg{ stroke:var(--ok); }
.msyv{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:850; letter-spacing:-.4px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.msyv i{ font-style:normal; font-size:8px; color:var(--muted); margin-left:1px; }

.msymeta{ font-size:10px; color:var(--muted); text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }

/* week chips — W1..W5 + M. The week you are IN is ringed. */
.msychips{ display:flex; gap:3px; justify-content:center; flex-wrap:nowrap; }
.msych{
  flex:1 1 0; min-width:0; text-align:center;
  font-size:8px; font-weight:800; letter-spacing:.02em; line-height:1;
  padding:3px 0; border-radius:4px;
  background:rgba(var(--olive-rgb,111 125 51),.18); color:var(--olive-d);
  transition:background .16s, color .16s;
}
.msych.none{ background:var(--line2); color:var(--muted); opacity:.55; }
.msych.full{ background:var(--ok); color:#fff; }
.msych.appr{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 60%,transparent); }
.msych.now{ outline:1.5px solid var(--olive); outline-offset:1px; }

@media (max-width:1100px){ .msyeargrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px){
  .msyeargrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .msyearhint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .msytile, .msytile::after, .msyr-fg, .msych{ transition:none; }
  .msytile:hover{ transform:none; }
  .msytile:hover::after{ transform:translateX(-120%); }
}
@media print{ .msyear{ display:none !important; } }

/* ── PROJECT TAB BAR ──────────────────────────────────────────────────────
   Was eight equal slabs with a hard white fill on the active one. Now a single
   inset track with a soft raised pill: the active tab reads as ON the bar
   rather than punched out of it, and the row has one focal point instead of
   eight competing ones. Behaviour, order and handlers are untouched. */
.pdtabs{
  gap:4px; padding:4px; border-radius:14px;
  background:var(--paper3); border:1px solid var(--line2);
  scrollbar-width:none;
}
.pdtabs::-webkit-scrollbar{ display:none; }
.pdtab{
  position:relative; overflow:hidden;
  border:1px solid transparent; background:transparent; color:var(--muted);
  border-radius:10px; padding:9px 13px; font-weight:800; font-size:12.5px;
  white-space:nowrap; letter-spacing:.01em;
  transition:color .16s, background .16s, transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .16s;
}
/* a quiet underline that grows from the centre on hover — enough of a cue to
   feel responsive without moving anything around it */
.pdtab::after{
  content:''; position:absolute; left:50%; right:50%; bottom:5px; height:2px;
  border-radius:2px; background:var(--olive);
  transition:left .2s cubic-bezier(.2,.8,.2,1), right .2s cubic-bezier(.2,.8,.2,1), opacity .16s;
  opacity:0;
}
.pdtab:hover{ color:var(--ink); background:rgba(var(--olive-rgb,111 125 51),.10); }
.pdtab:hover::after{ left:22%; right:22%; opacity:.75; }
.pdtab:active{ transform:scale(.97); }
.pdtab:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }
.pdtab.on{
  color:#fff; background:linear-gradient(165deg,var(--olive),var(--olive-d));
  border-color:transparent;
  box-shadow:0 4px 12px -6px rgba(var(--olive-rgb,111 125 51),.85), 0 1px 0 rgba(255,255,255,.14) inset;
  transform:translateY(-1px);
}
.pdtab.on::after{ opacity:0; }
.pdtab.on:hover{ background:linear-gradient(165deg,var(--olive),var(--olive-d)); }
@media (prefers-reduced-motion:reduce){
  .pdtab, .pdtab::after{ transition:none; }
  .pdtab:active{ transform:none; }
  .pdtab.on{ transform:none; }
}

/* ── Money variant · the .motrk month tabs (Expenses et al) ────────────────
   Same calendar, but the headline is an amount rather than a completion ring:
   a proportional bar reads a year of spending faster than twelve percentages,
   and every bar is scaled against the YEAR's peak so the months are actually
   comparable to each other rather than each to itself. */
.msyear-mo .msytile{ gap:6px; }
.msyamt{
  font-size:14px; font-weight:850; letter-spacing:-.4px; color:var(--ink);
  font-variant-numeric:tabular-nums; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msyamt.neg{ color:var(--bad); }
.msytile.empty .msyamt{ color:var(--muted); font-weight:800; }
.msybar{
  display:block; height:5px; border-radius:3px; background:var(--line2); overflow:hidden;
}
.msybar > i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--olive),var(--ok));
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.msytile.now .msybar > i{ background:linear-gradient(90deg,var(--olive-d),var(--olive)); }
@media (prefers-reduced-motion:reduce){ .msybar > i{ transition:none; } }

/* ── Selected tile ────────────────────────────────────────────────────────
   The calendar is now the navigator, so it has to say which month you are
   looking at — distinct from "NOW", because the two are often different
   months once you start browsing. */
.msytile.sel{
  border-color:var(--olive);
  box-shadow:0 0 0 2px rgba(var(--olive-rgb,111 125 51),.45), 0 8px 20px -12px rgba(0,0,0,.6);
  background:linear-gradient(165deg,rgba(var(--olive-rgb,111 125 51),.16),var(--paper2));
}
.msytile.sel .msyamt{ color:var(--olive-d); }
html[data-theme="dark"] .msytile.sel .msyamt{ color:#cfe08a; }

/* ── One month's detail, under the calendar ───────────────────────────────
   Replaces the twelve stacked folds. Its own header restates which month you
   are in and carries prev/next, so stepping through the year never needs a
   trip back up to the grid. */
.mopanel{
  border:1px solid var(--line); border-radius:16px; background:var(--paper2);
  margin:0 2px 12px; overflow:hidden;
}
.mopanelhd{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 13px; border-bottom:1px solid var(--line2);
  background:var(--olive-soft);
}
html[data-theme="dark"] .mopanelhd{ background:rgba(var(--olive-rgb,111 125 51),.13); }
.mopanelt{
  font-size:14px; font-weight:850; letter-spacing:-.2px; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.mopanelnow{
  font-style:normal; font-size:8.5px; font-weight:850; letter-spacing:.06em;
  padding:2px 7px; border-radius:999px; background:var(--olive); color:#fff;
}
.mopanelv{ margin-left:auto; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.mopanelv b{ color:var(--ink); font-size:14px; font-variant-numeric:tabular-nums; margin-left:5px; }
.mopanelnav{
  flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--paper2); color:var(--ink2);
  font:inherit; font-size:17px; line-height:1; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s, border-color .14s, transform .1s;
}
.mopanelnav:hover:not([disabled]){ border-color:var(--olive); color:var(--olive-d); background:var(--paper3); }
.mopanelnav:active:not([disabled]){ transform:scale(.92); }
.mopanelnav[disabled]{ opacity:.35; cursor:default; }
.mopanelnav:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }
.mopanelbody{ padding:12px 13px 13px; }
.mopanelbody > .molk{ padding:18px; text-align:center; color:var(--muted); font-size:12.5px; }
@media (prefers-reduced-motion:reduce){ .mopanelnav{ transition:none; } .mopanelnav:active{ transform:none; } }

/* ── Site Form · the one month on screen ──────────────────────────────────
   Was a <details>/<summary>. It is always open now (the calendar decides which
   month, so a fold on top of that was a second control for the same thing), so
   the header is a plain bar carrying prev/next, the status pill and the month
   bar — the same pieces the summary used to hold. */
.msmonpanel{ border:1px solid var(--line); border-radius:14px; background:var(--paper2); overflow:hidden; }
.msmonhd{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--line2);
  background:var(--olive-soft);
}
html[data-theme="dark"] .msmonhd{ background:rgba(var(--olive-rgb,111 125 51),.13); }
.msmonhd .mosumL{ font-size:14px; font-weight:850; letter-spacing:-.2px; color:var(--ink); }
.msmonhd .mosumR{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.msmonhd .mosumL:before{ content:none; }   /* the fold caret has no fold to open */

/* ── OFFICIAL RECORDED MONTHS ───────────────────────────────────────────────
   A month whose score comes from the Head's recorded Site Form sheet, not from
   the live task list. It must be visibly distinguishable — an 81% the schedule
   computed and a 93.33% the Head signed off are different kinds of fact, and a
   reader who cannot tell them apart will eventually trust the wrong one.
   Marked with the olive accent the app already uses for authoritative figures,
   plus the word "official" in the tile's meta line. */
.msytile.rec{
  border-color:color-mix(in srgb, var(--olive,#7c8a3e) 55%, var(--line,#d3d8de));
  background:color-mix(in srgb, var(--olive,#7c8a3e) 6%, transparent);
}
.msytile.rec .msyv{ color:var(--olive-d,#54632a); }
.msytile.rec .msyr-fg{ stroke:var(--olive,#7c8a3e); }
.msytile.rec .msymeta{
  color:var(--olive-d,#54632a); font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; font-size:9px;
}
html[data-theme="dark"] .msytile.rec{ background:rgba(124,138,62,.14); }
html[data-theme="dark"] .msytile.rec .msyv,
html[data-theme="dark"] .msytile.rec .msymeta{ color:#b9c77e; }