/* ui.css — the browsing chrome around the sheet. None of this prints. */
:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#101418; --muted:#5d6874; --line:#e3e7ec;
  --brand:#0a66c2; --brand-soft:#e8f1fb; --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
a{color:var(--brand)}
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 64px}

header.top{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:20px}
header.top h1{font-size:22px;margin:0;letter-spacing:-.01em}
header.top p{margin:2px 0 0;color:var(--muted);font-size:13.5px}

.tabs{display:flex;gap:6px;margin:0 0 18px}
.tabs button{appearance:none;border:1px solid var(--line);background:var(--panel);
  padding:8px 16px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:#fff}

.layout{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
/* The sheet is a fixed 210mm (~794px) block and grid items default to min-width:auto,
   so this column refused to shrink below it — which pushed the whole page wider than a
   phone viewport and stretched the sidebar, ballooning the calendar cells. */
#stagewrap, .stage{min-width:0}
@media screen and (max-width:900px){.layout{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:0 0 12px;font-weight:700}
.panel + .panel{margin-top:16px}

.picker{display:flex;flex-direction:column;gap:10px}
.picker label{font-size:12.5px;color:var(--muted);font-weight:600}
input[type=date],input[type=search]{width:100%;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
/* Native select chevrons sit hard against the border once the box is sized to content,
   so draw our own and give it real padding. */
select{width:100%;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff;color:var(--ink);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235d6874' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
select:hover{border-color:#c9d2dc}

.daylist{max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:2px;
  margin:-4px -4px 0;padding:4px}
.daylist button{text-align:left;border:0;background:none;padding:7px 10px;border-radius:8px;
  font:inherit;cursor:pointer;color:var(--ink)}
.daylist button:hover{background:var(--bg)}
.daylist button[aria-current=true]{background:var(--brand-soft);color:var(--brand);font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:6px;max-height:340px;overflow:auto;padding:2px}
.chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;
  font:inherit;font-size:12.5px;cursor:pointer;line-height:1.25;text-align:center;min-width:74px}
.chip small{display:block;color:var(--muted);font-size:11px}
.chip[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:700}
.chip[aria-pressed=true] small{color:var(--brand)}

.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{appearance:none;border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:8px;
  font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:#c9d2dc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}

.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;overflow:auto}
.stagebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.stagebar .meta{color:var(--muted);font-size:13px}
.scaler{transform-origin:top left}
.hint-note{color:var(--muted);font-size:12.5px;margin:10px 0 0}
.empty{color:var(--muted);padding:40px 10px;text-align:center}

/* the sheet gets a page-like frame on screen only */
.stage .sheet{box-shadow:0 1px 3px rgba(16,20,24,.10),0 8px 28px rgba(16,20,24,.07);
  border:1px solid var(--line)}



/* --- month calendar (day mode) --------------------------------------------- */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.calctl{display:flex;align-items:center;gap:4px}
.btn.tiny{padding:3px 8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.btn.tiny:hover{color:var(--brand);border-color:var(--brand)}
/* Caps are inherited from .panel h2 (consistent with the other panel headings); what
   made "SEPTEMBER 2026" wrap and shove the controls out of line in a 290px panel was the
   letter-spacing, so that goes and the label never wraps. */
.calhead h2{font-size:13.5px;letter-spacing:0;color:var(--ink);font-weight:700;white-space:nowrap}
.btn.cal-nav{padding:2px 8px;line-height:1.2;font-size:15px}
/* Cap the grid so cells stay button-sized however wide the panel gets. */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;max-width:330px}
.cal .dow{font-size:10.5px;color:var(--muted);text-align:center;font-weight:700;padding-bottom:2px}
.cal button, .cal span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font:inherit;font-size:13px;border:1px solid transparent;background:none}
.cal button{cursor:pointer;background:var(--bg);color:var(--ink);font-weight:600}
.cal button:hover{border-color:var(--brand);color:var(--brand)}
.cal button[aria-current=true]{background:var(--brand);color:#fff;border-color:var(--brand)}
.cal span{color:#c3cad3}                       /* a day with no sheet */

/* --- small screens ---------------------------------------------------------- */
@media screen and (max-width:640px){
  .wrap{padding:16px 14px 44px}
  header.top h1{font-size:19px}
  header.top p{font-size:13px}
  .layout{gap:14px}
  .panel{padding:13px}
  .stage{padding:12px}
  .stagebar{gap:8px}
  /* the sheet preview is tiny at this width; it is a preview, printing is unaffected */
  .stage .sheet{box-shadow:none}
}

/* MUST BE LAST. iOS prints the mobile layout, so width queries can still match during a
   print run there; keeping this block at the end of the file means the print reset always
   wins the cascade no matter how the UA evaluates them. A re-applied .wrap/.stage padding
   is enough to push the fixed-height sheet onto a blank second page. */
@media print{
  html, body{margin:0;padding:0;height:auto}
  /* Hide the chrome by name. (Do NOT use `.wrap > *:not(#stagewrap)` — #stagewrap is a
     grandchild, inside .layout, so that selector hides the very thing we want to print
     and the page comes out blank.) */
  body{background:#fff}
  header.top, .tabs, .side, .stagebar{display:none!important}
  .wrap{max-width:none;margin:0;padding:0}
  .layout{display:block}
  .stage{border:0;border-radius:0;padding:0;overflow:visible;background:#fff}
  .stage .sheet{box-shadow:none;border:0}
  .scaler{transform:none!important;height:auto!important}
  .sheet{page-break-after:always;break-after:page}
  .sheet:last-child{page-break-after:auto;break-after:auto}
}