/* ============================================================================
 * js/planning/planning.css - DRAZIL planning tools (Timetable Studio today,
 * Date Sheet next). Reuses the app tokens (--surface, --line, --accent,
 * --sans/--serif/--mono, --r-*, --fs-*); adds only planner-specific layout.
 * Print rules at the bottom print ONLY the timetable sheet.
 * ========================================================================== */

#view-timetable, #view-date-sheet { --tt-ev-radius: 8px; }

/* ---------- shared shell ---------- */

.tt-wrap { max-width: 1180px; margin: 0 auto; width: 100%; padding: 16px; box-sizing: border-box; }
.tt-grid { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .tt-grid { grid-template-columns: 1fr; } }

.tt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.tt-card + .tt-card { margin-top: 14px; }
.tt-card h2 {
  font: 600 var(--fs-base)/1.3 var(--sans); color: var(--fg); margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.tt-card h2 .tt-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-full); flex: none;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-h); font: 700 11px/1 var(--mono);
}
.tt-sub { font: 400 var(--fs-sm)/1.5 var(--sans); color: var(--soft, #8b8794); margin: 2px 0 10px; }

.tt-textarea {
  width: 100%; box-sizing: border-box; min-height: 132px; resize: vertical;
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px; font: 400 var(--fs-sm)/1.55 var(--sans);
}
.tt-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tt-textarea::placeholder { color: var(--muted, #8b8794); }

.tt-input, .tt-select {
  width: 100%; box-sizing: border-box; background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 9px;
  font: 500 var(--fs-sm)/1.3 var(--sans);
}
.tt-input:focus-visible, .tt-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-row > * { flex: 1 1 120px; min-width: 0; }
.tt-label { display: block; font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft, #8b8794); margin: 0 0 4px 2px; }
.tt-hint { font: 400 11.5px/1.5 var(--sans); color: var(--muted, #8b8794); margin: 6px 2px 0; }

/* ---------- input triad ---------- */

.tt-ics-drop {
  display: flex; align-items: center; gap: 10px; border: 1px dashed var(--line2, rgba(255,255,255,.22));
  border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; transition: border-color var(--dur-quick,150ms), background var(--dur-quick,150ms);
  background: transparent; color: var(--soft, #8b8794); text-align: left; width: 100%;
  font: 500 var(--fs-sm)/1.4 var(--sans);
}
.tt-ics-drop:hover, .tt-ics-drop:focus-visible { border-color: var(--accent); color: var(--fg); outline: none; }
.tt-ics-drop b { color: var(--fg); }

.tt-ics-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 220px; overflow: auto; }
.tt-ics-item {
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: var(--r-sm); background: var(--surface-2);
  border: 1px solid var(--line); font: 400 12px/1.4 var(--sans);
}
.tt-ics-item .tt-ic-time { font: 600 11px/1.2 var(--mono); color: var(--fg); }
.tt-ics-item .tt-ic-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.tt-ics-item .tt-ic-meta { font: 400 10px/1.2 var(--mono); color: var(--muted, #8b8794); }
.tt-ic-fixed {
  font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--warn, #e0a93f);
  border: 1px solid color-mix(in srgb, var(--warn, #e0a93f) 45%, transparent); border-radius: var(--r-full); padding: 3px 7px; white-space: nowrap;
}
.tt-ic-remove { background: none; border: 0; color: var(--muted, #8b8794); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 6px; }
.tt-ic-remove:hover { color: var(--err, #e0645a); background: var(--surface-3, #222228); }

/* committed manual + imported items */
.tt-items { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tt-item {
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--tt-color, var(--accent)); font: 400 12px/1.4 var(--sans);
}
.tt-item .tt-item-time { font: 600 11px/1.2 var(--mono); color: var(--fg); }
.tt-item .tt-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-tag { font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-full); white-space: nowrap; }
.tt-tag-fixed { color: var(--warn, #e0a93f); border: 1px solid color-mix(in srgb, var(--warn, #e0a93f) 45%, transparent); }
.tt-tag-flex { color: var(--ok, #4dbb7d); border: 1px solid color-mix(in srgb, var(--ok, #4dbb7d) 45%, transparent); }
.tt-tag-priority-high { color: var(--err, #e0645a); }
.tt-tag-priority-normal { color: var(--soft, #8b8794); }
.tt-tag-priority-low { color: var(--muted, #8b8794); }
.tt-item-btn { background: none; border: 0; color: var(--muted, #8b8794); cursor: pointer; padding: 3px 5px; border-radius: 6px; font-size: 12px; }
.tt-item-btn:hover { color: var(--fg); background: var(--surface-3, #222228); }

/* ---------- duration chooser ---------- */

.tt-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-choice label { position: relative; }
.tt-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tt-choice span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--soft, #8b8794); font: 500 var(--fs-sm)/1 var(--sans);
  transition: all var(--dur-quick,150ms); white-space: nowrap; cursor: pointer;
}
.tt-choice input:checked + span { border-color: var(--accent); color: var(--accent-h); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tt-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- wake / sleep ---------- */

.tt-wakesleep {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end;
  padding: 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
@media (max-width: 560px) { .tt-wakesleep { grid-template-columns: 1fr; } }
.tt-wakesleep .tt-time-big { font: 600 22px/1.1 var(--mono); padding: 10px 12px; }
.tt-ws-found { font: 400 11.5px/1.5 var(--sans); color: var(--ok, #4dbb7d); margin: 8px 2px 0; }
.tt-ws-missing { font: 400 11.5px/1.5 var(--sans); color: var(--warn, #e0a93f); margin: 8px 2px 0; }

.tt-perday { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; }
.tt-perday summary { cursor: pointer; font: 600 var(--fs-sm)/1.5 var(--sans); color: var(--soft, #8b8794); }
.tt-perday-row { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.tt-perday-row span { font: 500 12px/1 var(--sans); color: var(--soft, #8b8794); }

/* ---------- AI transparency disclosure ---------- */

.tt-privacy {
  border: 1px solid color-mix(in srgb, var(--warn, #e0a93f) 35%, var(--line));
  background: color-mix(in srgb, var(--warn, #e0a93f) 6%, var(--surface-2));
  border-radius: var(--r-md); padding: 10px 12px; margin: 12px 0 4px;
}
.tt-privacy p { font: 400 12px/1.55 var(--sans); color: var(--fg); margin: 0; }
.tt-privacy strong { color: var(--warn, #e0a93f); }
.tt-privacy details { margin-top: 8px; }
.tt-privacy summary { cursor: pointer; font: 600 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--warn, #e0a93f); }
.tt-privacy ul { margin: 8px 0 0; padding-left: 18px; }
.tt-privacy li { font: 400 11.5px/1.55 var(--sans); color: var(--soft, #a8a498); margin: 2px 0; }

/* ---------- stage flow ---------- */

.tt-stagebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.tt-provenance {
  font: 700 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full); border: 1px solid var(--line); color: var(--soft, #8b8794);
}
.tt-provenance.ai { color: var(--accent-h); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tt-provenance.offline { color: var(--warn, #e0a93f); border-color: color-mix(in srgb, var(--warn, #e0a93f) 45%, transparent); }

.tt-reasoning { margin: 10px 0 0; padding-left: 20px; }
.tt-reasoning li { font: 400 12.5px/1.6 var(--sans); color: var(--soft, #a8a498); margin: 3px 0; }

.tt-modchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tt-modchips button {
  font: 500 11px/1 var(--sans); padding: 6px 11px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--soft, #a8a498);
}
.tt-modchips button:hover { border-color: var(--accent); color: var(--accent-h); }

.tt-error {
  border: 1px solid color-mix(in srgb, var(--err, #e0645a) 50%, transparent);
  background: color-mix(in srgb, var(--err, #e0645a) 10%, var(--surface-2));
  color: var(--fg); border-radius: var(--r-md); padding: 10px 12px; font: 400 12px/1.55 var(--sans); margin-top: 10px;
}
.tt-warnbar {
  border: 1px solid color-mix(in srgb, var(--warn, #e0a93f) 45%, transparent);
  background: color-mix(in srgb, var(--warn, #e0a93f) 9%, var(--surface-2));
  border-radius: var(--r-md); padding: 8px 12px; font: 400 12px/1.55 var(--sans); margin-bottom: 10px;
}
.tt-warnbar ul { margin: 4px 0 0; padding-left: 18px; }

.tt-busy { display: inline-flex; align-items: center; gap: 8px; color: var(--soft, #8b8794); font: 500 var(--fs-sm)/1 var(--sans); }
.tt-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2, rgba(255,255,255,.25)); border-top-color: var(--accent); animation: tt-spin 0.9s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-spinner { animation: none; } }

/* ---------- the sheet: toolbar + views ---------- */

.tt-sheetbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.tt-viewswitch { display: flex; gap: 4px; flex-wrap: wrap; }
.tt-viewswitch button {
  font: 600 12px/1 var(--sans); padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--soft, #8b8794); cursor: pointer;
}
.tt-viewswitch button[aria-pressed="true"] { background: var(--surface-3, #222228); color: var(--fg); border-color: var(--line); }

.tt-exportbar { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-exportbar .btn { display: inline-flex; align-items: center; gap: 6px; }

.tt-template-picker { display: flex; gap: 6px; }
.tt-template-btn {
  font: 500 11px/1 var(--sans); padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--soft, #8b8794);
}
.tt-template-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-h); }

/* The printable sheet itself */
.tt-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; overflow: hidden; }
.tt-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.tt-sheet-title { font: 600 22px/1.2 var(--serif, Georgia, serif); color: var(--fg); margin: 0; }
.tt-sheet-meta { font: 400 11px/1.5 var(--mono); color: var(--muted, #8b8794); text-align: right; }

/* --- time grid (Daily & Weekly) --- */
.tt-timegrid { display: grid; grid-template-columns: 52px repeat(var(--tt-cols, 1), minmax(0, 1fr)); }
.tt-timegrid .tt-hourlabels { display: flex; flex-direction: column; }
.tt-hourlabels-head { border-bottom: 1px solid var(--line); }
.tt-hourlabel { height: var(--tt-hour-h, 56px); font: 400 10.5px/1 var(--mono); color: var(--muted, #8b8794); border-top: 1px solid var(--line); padding-top: 3px; box-sizing: border-box; }
.tt-daycol { border-left: 1px solid var(--line); position: relative; }
.tt-dayhead { font: 600 11px/1 var(--sans); color: var(--soft, #8b8794); text-align: center; padding: 4px 0 6px; border-left: 1px solid var(--line); }
.tt-dayhead small { display: block; font: 400 10px/1.6 var(--mono); color: var(--muted, #8b8794); }
.tt-daybody { position: relative; border-left: 1px solid var(--line); }
.tt-daybody .tt-hourline { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }

.tt-ev {
  position: absolute; left: 3px; right: 3px; border-radius: var(--tt-ev-radius);
  padding: 4px 6px; box-sizing: border-box; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--tt-color, var(--accent)) 22%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--tt-color, var(--accent)) 65%, transparent);
  border-left: 3px solid var(--tt-color, var(--accent));
  color: var(--fg); text-align: left; transition: box-shadow var(--dur-quick,150ms);
  user-select: none; touch-action: none;
}
.tt-ev:hover { box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.35)); z-index: 3; }
.tt-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; }
.tt-ev .tt-ev-title { font: 600 11px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-ev .tt-ev-time { font: 400 9.5px/1.4 var(--mono); color: var(--soft, #a8a498); white-space: nowrap; overflow: hidden; }
.tt-ev.is-fixed { border-style: solid; }
.tt-ev.is-fixed .tt-ev-title::before { content: '\1F512  '; font-size: 9px; }
.tt-ev.conflict { outline: 2px solid var(--err, #e0645a); outline-offset: -1px; }
.tt-ev.selected { outline: 2px solid var(--accent); z-index: 4; }
.tt-ev .tt-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize;
}
.tt-ev .tt-resize::after {
  content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 2px;
  background: color-mix(in srgb, var(--tt-color, var(--accent)) 80%, transparent); border-radius: 2px;
}

/* --- agenda --- */
.tt-agenda { display: flex; flex-direction: column; gap: 14px; }
.tt-agenda-day h3 { font: 600 12px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--soft, #8b8794); margin: 0 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.tt-agenda-row {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: var(--r-sm); border-left: 3px solid var(--tt-color, var(--accent));
  background: color-mix(in srgb, var(--tt-color, var(--accent)) 8%, transparent); margin: 4px 0; cursor: pointer; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; color: var(--fg);
}
.tt-agenda-row:hover { background: color-mix(in srgb, var(--tt-color, var(--accent)) 14%, transparent); }
.tt-agenda-row .tt-ag-time { font: 600 11.5px/1.4 var(--mono); }
.tt-agenda-row .tt-ag-title { font: 500 13px/1.4 var(--sans); }
.tt-agenda-row .tt-ag-title small { color: var(--muted, #8b8794); font-size: 10.5px; }

/* --- compact --- */
.tt-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tt-compact-day { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface-2); }
.tt-compact-day h3 { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; color: var(--soft, #8b8794); }
.tt-compact-row { display: flex; gap: 6px; align-items: baseline; font: 400 11px/1.7 var(--sans); border-bottom: 1px dashed var(--line); padding: 2px 0; }
.tt-compact-row:last-child { border-bottom: 0; }
.tt-compact-row b { font: 600 10px/1.6 var(--mono); color: var(--fg); white-space: nowrap; }

/* --- empty states --- */
.tt-empty { text-align: center; padding: 34px 20px; color: var(--muted, #8b8794); }
.tt-empty h3 { color: var(--fg); font: 600 var(--fs-base)/1.3 var(--sans); margin: 0 0 6px; }
.tt-empty p { font: 400 var(--fs-sm)/1.6 var(--sans); margin: 0 auto; max-width: 420px; }

/* --- event editor popover --- */
.tt-editor {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; align-items: end;
  margin-top: 12px; padding: 12px; border: 1px solid var(--line2, rgba(255,255,255,.2)); border-radius: var(--r-md);
  background: var(--surface-2);
}
.tt-editor .tt-editor-actions { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
.tt-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.tt-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.tt-swatch[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 1px; }

/* ---------- templates ---------- */

/* Modern Academic: parchment, serif, ink-blue accent */
.tt-sheet[data-tt-template="academic"] {
  background: #f5efe3; border-color: #d8ccb6; color: #2b2419;
}
.tt-sheet[data-tt-template="academic"] .tt-sheet-title { color: #2e3a52; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .01em; }
.tt-sheet[data-tt-template="academic"] .tt-sheet-meta,
.tt-sheet[data-tt-template="academic"] .tt-hourlabel,
.tt-sheet[data-tt-template="academic"] .tt-dayhead,
.tt-sheet[data-tt-template="academic"] .tt-compact-day h3,
.tt-sheet[data-tt-template="academic"] .tt-agenda-day h3 { color: #6b5f4b; }
.tt-sheet[data-tt-template="academic"] .tt-daycol,
.tt-sheet[data-tt-template="academic"] .tt-daybody,
.tt-sheet[data-tt-template="academic"] .tt-hourlabel,
.tt-sheet[data-tt-template="academic"] .tt-dayhead { border-color: #d8ccb6; }
.tt-sheet[data-tt-template="academic"] .tt-hourline { background: #e0d6c4; }
.tt-sheet[data-tt-template="academic"] .tt-sheet-head { border-color: #d8ccb6; }
.tt-sheet[data-tt-template="academic"] .tt-ev { color: #2b2419; }
.tt-sheet[data-tt-template="academic"] .tt-ev .tt-ev-time { color: #6b5f4b; }
.tt-sheet[data-tt-template="academic"] .tt-compact-day { background: #ede6d6; border-color: #d8ccb6; }
.tt-sheet[data-tt-template="academic"] .tt-agenda-row { background: #ede6d6; color: #2b2419; }
.tt-sheet[data-tt-template="academic"] .tt-sheet-head { border-bottom-color: #b9a982; border-bottom-width: 2px; }

/* Dark: near-black with amber phosphor accent */
.tt-sheet[data-tt-template="dark"] {
  background: #0b0b0f; border-color: #26262e; color: #f3ead8;
}
.tt-sheet[data-tt-template="dark"] .tt-sheet-title { color: #ffc46b; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; }
.tt-sheet[data-tt-template="dark"] .tt-sheet-meta,
.tt-sheet[data-tt-template="dark"] .tt-hourlabel,
.tt-sheet[data-tt-template="dark"] .tt-dayhead,
.tt-sheet[data-tt-template="dark"] .tt-compact-day h3,
.tt-sheet[data-tt-template="dark"] .tt-agenda-day h3 { color: #8d8574; }
.tt-sheet[data-tt-template="dark"] .tt-daycol,
.tt-sheet[data-tt-template="dark"] .tt-daybody,
.tt-sheet[data-tt-template="dark"] .tt-hourlabel,
.tt-sheet[data-tt-template="dark"] .tt-dayhead { border-color: #26262e; }
.tt-sheet[data-tt-template="dark"] .tt-hourline { background: #1e1e26; }
.tt-sheet[data-tt-template="dark"] .tt-sheet-head { border-color: #26262e; }
.tt-sheet[data-tt-template="dark"] .tt-ev { color: #f3ead8; }
.tt-sheet[data-tt-template="dark"] .tt-ev .tt-ev-time { color: #a49a85; }
.tt-sheet[data-tt-template="dark"] .tt-compact-day { background: #121218; border-color: #26262e; }
.tt-sheet[data-tt-template="dark"] .tt-agenda-row { background: #121218; color: #f3ead8; }

/* Minimalist (default): quiet ink on canvas */
.tt-sheet[data-tt-template="minimalist"] .tt-sheet-title { font-family: var(--sans, system-ui, sans-serif); font-weight: 600; }

/* ---------- print: only the sheet ---------- */

#ttPrintSheet { display: none; }

@media print {
  @page { size: A4; margin: 14mm; }
  body > * { display: none !important; }
  body > #ttPrintHost { display: block !important; }
  #ttPrintHost { position: static !important; }
  #ttPrintSheet { display: block !important; color: #111; background: #fff; font-family: Georgia, serif; }
  #ttPrintSheet h1 { font-size: 20pt; margin: 0 0 2pt; }
  #ttPrintSheet .tt-print-meta { font-size: 8pt; color: #555; margin-bottom: 10pt; border-bottom: 1pt solid #999; padding-bottom: 6pt; }
  #ttPrintSheet table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  #ttPrintSheet th, #ttPrintSheet td { border: .5pt solid #bbb; padding: 3pt 5pt; text-align: left; vertical-align: top; }
  #ttPrintSheet th { background: #eee; }
  #ttPrintSheet .tt-print-fixed td:first-child { font-weight: bold; }
}
/* ============================================================================
 * Date Sheet Studio additions (this file only; the timetable tokens above are
 * untouched). Month calendar, timeline, list and table views, priority
 * bands, the design studio shell, five new sheet templates, wallpaper
 * swatches, and the ds print host (mirrors #ttPrintHost above).
 * ========================================================================== */

/* ---------- design studio shell ---------- */

.tt-design {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
  background: var(--surface-2); margin-bottom: 12px;
}
.tt-design-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tt-design-panel[hidden] { display: none; }

/* ---------- built-in background swatches + wallpaper ---------- */

.ds-bg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-bg-swatch {
  width: 62px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line2, rgba(255,255,255,.22));
  cursor: pointer; padding: 0; transition: transform var(--dur-quick,150ms);
}
.ds-bg-swatch:hover { transform: translateY(-1px); border-color: var(--accent); }
.ds-bg-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-bg-swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.ds-bg-none { background: var(--surface); position: relative; }
.ds-bg-none::after { content: 'none'; font: 600 9px/40px var(--mono); color: var(--muted, #8b8794); display: block; text-align: center; }
.ds-bg-sunrise { background: linear-gradient(158deg, #1f0f0a 0%, #7a3b1e 55%, #c97a2b 100%); }
.ds-bg-midnight { background: linear-gradient(165deg, #05060f 0%, #141a3a 60%, #2a2f55 100%); }
.ds-bg-linen { background: linear-gradient(160deg, #f2ecdd 0%, #d8cbb2 100%); }
.ds-bg-graphite { background: linear-gradient(150deg, #111116 0%, #23232b 60%, #2e2e38 100%); }
.ds-bg-forest { background: linear-gradient(165deg, #08130c 0%, #1d3a28 55%, #2e5740 100%); }

/* ---------- month calendar ---------- */

.ds-month-wrap { overflow-x: auto; }
.ds-month {
  display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-width: 720px;
}
.ds-month-head {
  background: var(--surface-2); color: var(--soft, #8b8794); font: 600 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 8px 4px;
}
.ds-month-cell {
  background: var(--surface); min-height: 104px; padding: 6px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px;
}
.ds-month-cell.is-other { opacity: .42; }
.ds-month-cell.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-month-daynum {
  align-self: flex-start; background: none; border: 0; cursor: pointer; color: var(--soft, #8b8794);
  font: 600 11px/1 var(--mono); padding: 3px 7px; border-radius: var(--r-full);
}
.ds-month-daynum:hover { background: var(--surface-3, #222228); color: var(--fg); }
.ds-month-cell.is-today .ds-month-daynum { background: var(--accent); color: #0f0c0a; }
.ds-month-chip {
  display: flex; gap: 6px; align-items: baseline; min-width: 0; text-align: left; cursor: pointer;
  border: 0; border-radius: 6px; padding: 3px 6px; color: var(--fg);
  background: color-mix(in srgb, var(--tt-color, var(--accent)) 16%, transparent);
  border-left: 3px solid var(--tt-color, var(--accent)); font: 500 10.5px/1.35 var(--sans);
}
.ds-month-chip:hover { background: color-mix(in srgb, var(--tt-color, var(--accent)) 26%, transparent); }
.ds-month-chip b { font: 600 9.5px/1.2 var(--mono); color: var(--soft, #a8a498); flex: none; }
.ds-month-chip .ds-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-month-chip.is-fixed { border-left-style: double; }
.ds-month-more { font: 600 9px/1 var(--mono); color: var(--muted, #8b8794); padding-left: 6px; }

/* ---------- priority bands ---------- */

.ds-pri {
  display: inline-flex; align-items: center; justify-content: center; min-width: 3.6em;
  font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-full); padding: 4px 8px; border: 1px solid var(--line); white-space: nowrap;
}
.ds-pri-high { color: var(--err, #e0645a); border-color: color-mix(in srgb, var(--err, #e0645a) 45%, transparent); }
.ds-pri-normal { color: var(--soft, #8b8794); }
.ds-pri-low { color: var(--muted, #8b8794); opacity: .8; }

/* ---------- table view ---------- */

.ds-tablewrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font: 400 12px/1.5 var(--sans); color: var(--fg); }
.ds-table thead th {
  text-align: left; font: 600 10px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--soft, #8b8794); border-bottom: 2px solid var(--line); padding: 6px 10px; white-space: nowrap;
}
.ds-table tbody tr { border-bottom: 1px solid var(--line); cursor: pointer; }
.ds-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ds-table tbody tr:hover { background: var(--surface-2); }
.ds-table tbody tr.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-table td { padding: 6px 10px; vertical-align: top; }
.ds-table-notes { color: var(--muted, #8b8794); font-size: 10.5px; }

/* ---------- timeline view ---------- */

.ds-timeline { position: relative; padding-left: 26px; }
.ds-timeline::before {
  content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); border-radius: 2px;
}
.ds-tl-group { margin: 6px 0 16px; }
.ds-tl-day {
  position: relative; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft, #8b8794); margin: 0 0 8px; padding-top: 2px;
}
.ds-tl-day::before {
  content: ''; position: absolute; left: -26px; top: 0px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--surface);
}
.ds-tl-item {
  display: grid; grid-template-columns: 92px 1fr auto auto; gap: 10px; align-items: center; width: 100%;
  text-align: left; cursor: pointer; color: var(--fg); border: 1px solid var(--line);
  border-left: 3px solid var(--tt-color, var(--accent)); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 7px 10px; margin: 4px 0; font: 400 12px/1.45 var(--sans);
}
.ds-tl-item:hover { border-color: var(--line2, rgba(255,255,255,.28)); background: var(--surface-3, #222228); }
.ds-tl-item.conflict { outline: 2px solid var(--err, #e0645a); outline-offset: -1px; }
.ds-tl-item.selected { outline: 2px solid var(--accent); }
.ds-tl-time { font: 600 12px/1.3 var(--mono); color: var(--fg); }
.ds-tl-time small { display: block; font: 400 10px/1.6 var(--mono); color: var(--muted, #8b8794); }
.ds-tl-main { min-width: 0; }
.ds-tl-main b { font: 600 12.5px/1.35 var(--sans); display: block; }
.ds-tl-sub { display: block; color: var(--muted, #8b8794); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- chronological list view ---------- */

.ds-list { display: flex; flex-direction: column; }
.ds-list-day {
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft, #8b8794);
  border-bottom: 1px solid var(--line); padding: 12px 2px 6px; margin-bottom: 4px;
}
.ds-list-row {
  display: grid; grid-template-columns: 128px 1fr auto auto; gap: 10px; align-items: center; width: 100%;
  text-align: left; cursor: pointer; color: var(--fg); border: 0; border-left: 3px solid var(--tt-color, var(--accent));
  background: transparent; padding: 6px 10px; border-radius: var(--r-sm); font: 400 12px/1.45 var(--sans);
}
.ds-list-row:hover { background: var(--surface-2); }
.ds-list-row.conflict { outline: 2px solid var(--err, #e0645a); outline-offset: -2px; }
.ds-list-row.selected { outline: 2px solid var(--accent); }
.ds-list-time { font: 600 11px/1.4 var(--mono); color: var(--fg); white-space: nowrap; }
.ds-list-main { min-width: 0; }
.ds-list-main b { font: 600 12.5px/1.35 var(--sans); display: block; }
.ds-list-main small { color: var(--muted, #8b8794); font-size: 10.5px; }

/* ---------- manual-add radios ---------- */

.ds-radio {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px var(--sans); color: var(--fg); cursor: pointer;
}

/* ---------- templates: the five new Date Sheet looks ---------- */

/* Monthly Planner: quiet sage parchment, green ink */
.tt-sheet[data-tt-template="monthly"] { background: #eef2ec; border-color: #cdd7c9; color: #1e3a2a; }
.tt-sheet[data-tt-template="monthly"] .tt-sheet-title { color: #1e3a2a; font-family: Georgia, 'Times New Roman', serif; }
.tt-sheet[data-tt-template="monthly"] .tt-sheet-meta,
.tt-sheet[data-tt-template="monthly"] .tt-dayhead,
.tt-sheet[data-tt-template="monthly"] .tt-compact-day h3,
.tt-sheet[data-tt-template="monthly"] .tt-agenda-day h3,
.tt-sheet[data-tt-template="monthly"] .ds-month-head,
.tt-sheet[data-tt-template="monthly"] .ds-tl-day,
.tt-sheet[data-tt-template="monthly"] .ds-list-day { color: #4a6354; }
.tt-sheet[data-tt-template="monthly"] .tt-daycol,
.tt-sheet[data-tt-template="monthly"] .tt-daybody,
.tt-sheet[data-tt-template="monthly"] .tt-dayhead,
.tt-sheet[data-tt-template="monthly"] .ds-month,
.tt-sheet[data-tt-template="monthly"] .ds-month-head,
.tt-sheet[data-tt-template="monthly"] .ds-table thead th { border-color: #cdd7c9; }
.tt-sheet[data-tt-template="monthly"] .tt-hourline { background: #dde6db; }
.tt-sheet[data-tt-template="monthly"] .ds-month-cell { background: #fbfdfa; }
.tt-sheet[data-tt-template="monthly"] .ds-month-head { background: #e2e9de; }
.tt-sheet[data-tt-template="monthly"] .tt-compact-day { background: #fbfdfa; border-color: #cdd7c9; }
.tt-sheet[data-tt-template="monthly"] .ds-list-row:hover,
.tt-sheet[data-tt-template="monthly"] .ds-table tbody tr:hover,
.tt-sheet[data-tt-template="monthly"] .ds-table tbody tr:nth-child(even) { background: #e6ede2; }
.tt-sheet[data-tt-template="monthly"] .tt-ev { color: #1e3a2a; }
.tt-sheet[data-tt-template="monthly"] .tt-ev .tt-ev-time { color: #4a6354; }
.tt-sheet[data-tt-template="monthly"] .ds-month-cell.is-today { outline-color: #3a7d5d; }

/* Editorial Calendar: presses and proofs, ink and editor's red */
.tt-sheet[data-tt-template="editorial"] { background: #f7f5ef; border-color: #dcd8cb; color: #16150f; }
.tt-sheet[data-tt-template="editorial"] .tt-sheet-title {
  color: #16150f; font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  text-transform: none; letter-spacing: -0.01em; border-bottom: 3px double #b3392e; display: inline-block; padding-bottom: 2px;
}
.tt-sheet[data-tt-template="editorial"] .tt-sheet-meta,
.tt-sheet[data-tt-template="editorial"] .tt-dayhead,
.tt-sheet[data-tt-template="editorial"] .ds-month-head,
.tt-sheet[data-tt-template="editorial"] .ds-tl-day,
.tt-sheet[data-tt-template="editorial"] .ds-list-day { color: #57544a; text-transform: uppercase; letter-spacing: .08em; }
.tt-sheet[data-tt-template="editorial"] .tt-daycol,
.tt-sheet[data-tt-template="editorial"] .tt-daybody,
.tt-sheet[data-tt-template="editorial"] .tt-dayhead { border-color: #dcd8cb; }
.tt-sheet[data-tt-template="editorial"] .tt-hourline { background: #eae6da; }
.tt-sheet[data-tt-template="editorial"] .ds-month-cell { background: #fffdf8; }
.tt-sheet[data-tt-template="editorial"] .ds-month-head { background: #edeae0; border-bottom: 1px solid #b3392e; }
.tt-sheet[data-tt-template="editorial"] .ds-month-daynum { color: #b3392e; }
.tt-sheet[data-tt-template="editorial"] .ds-month-cell.is-today { outline-color: #b3392e; }
.tt-sheet[data-tt-template="editorial"] .tt-sheet-head { border-bottom: 2px solid #16150f; }
.tt-sheet[data-tt-template="editorial"] .tt-ev { color: #16150f; }
.tt-sheet[data-tt-template="editorial"] .tt-ev .tt-ev-time { color: #57544a; }
.tt-sheet[data-tt-template="editorial"] .ds-pri-high { color: #b3392e; border-color: #b3392e; }
.tt-sheet[data-tt-template="editorial"] .ds-table tbody tr:nth-child(even) { background: #efece3; }

/* Color-Coded Schedule: deep studio slate, vivid chips, mono labels */
.tt-sheet[data-tt-template="colorcoded"] { background: #14161f; border-color: #262a3d; color: #eef0ff; }
.tt-sheet[data-tt-template="colorcoded"] .tt-sheet-title { color: #ffffff; font-family: var(--sans, system-ui, sans-serif); font-weight: 800; letter-spacing: -0.02em; text-transform: none; }
.tt-sheet[data-tt-template="colorcoded"] .tt-sheet-meta,
.tt-sheet[data-tt-template="colorcoded"] .tt-dayhead,
.tt-sheet[data-tt-template="colorcoded"] .ds-month-head,
.tt-sheet[data-tt-template="colorcoded"] .ds-tl-day,
.tt-sheet[data-tt-template="colorcoded"] .ds-list-day { color: #8a8fb3; text-transform: uppercase; letter-spacing: .1em; }
.tt-sheet[data-tt-template="colorcoded"] .tt-daycol,
.tt-sheet[data-tt-template="colorcoded"] .tt-daybody,
.tt-sheet[data-tt-template="colorcoded"] .tt-dayhead { border-color: #262a3d; }
.tt-sheet[data-tt-template="colorcoded"] .tt-hourline { background: #1e2233; }
.tt-sheet[data-tt-template="colorcoded"] .ds-month-cell { background: #181b28; }
.tt-sheet[data-tt-template="colorcoded"] .ds-month-head { background: #1e2233; }
.tt-sheet[data-tt-template="colorcoded"] .ds-month-daynum { color: #8a8fb3; }
.tt-sheet[data-tt-template="colorcoded"] .ds-month-cell.is-today { outline-color: #ffd166; }
.tt-sheet[data-tt-template="colorcoded"] .tt-sheet-head { border-color: #262a3d; }
.tt-sheet[data-tt-template="colorcoded"] .tt-ev { color: #eef0ff; }
.tt-sheet[data-tt-template="colorcoded"] .tt-ev .tt-ev-time { color: #a9aed6; }
.tt-sheet[data-tt-template="colorcoded"] .tt-compact-day { background: #181b28; border-color: #262a3d; }
.tt-sheet[data-tt-template="colorcoded"] .ds-tl-item,
.tt-sheet[data-tt-template="colorcoded"] .ds-list-row:hover,
.tt-sheet[data-tt-template="colorcoded"] .ds-table tbody tr:nth-child(even),
.tt-sheet[data-tt-template="colorcoded"] .ds-table tbody tr:hover { background: #1e2233; }
.tt-sheet[data-tt-template="colorcoded"] .ds-tl-item { border-color: #2c3048; }

/* Exam Planner: white hall, black spine, amber duty */
.tt-sheet[data-tt-template="exam"] { background: #fffdf5; border-color: #e8dfc8; color: #191410; }
.tt-sheet[data-tt-template="exam"] .tt-sheet-title { color: #191410; font-family: var(--mono, ui-monospace, monospace); font-weight: 700; letter-spacing: .02em; }
.tt-sheet[data-tt-template="exam"] .tt-sheet-head { border-bottom: 3px solid #191410; }
.tt-sheet[data-tt-template="exam"] .tt-sheet-meta,
.tt-sheet[data-tt-template="exam"] .tt-dayhead,
.tt-sheet[data-tt-template="exam"] .ds-month-head,
.tt-sheet[data-tt-template="exam"] .ds-tl-day,
.tt-sheet[data-tt-template="exam"] .ds-list-day { color: #6b5f4b; text-transform: uppercase; letter-spacing: .1em; }
.tt-sheet[data-tt-template="exam"] .tt-daycol,
.tt-sheet[data-tt-template="exam"] .tt-daybody,
.tt-sheet[data-tt-template="exam"] .tt-dayhead { border-color: #e8dfc8; }
.tt-sheet[data-tt-template="exam"] .tt-hourline { background: #f1ead9; }
.tt-sheet[data-tt-template="exam"] .ds-month-cell { background: #ffffff; }
.tt-sheet[data-tt-template="exam"] .ds-month-head { background: #191410; color: #f5c04b; }
.tt-sheet[data-tt-template="exam"] .ds-month-cell.is-today { outline-color: #d97706; }
.tt-sheet[data-tt-template="exam"] .ds-month-daynum { color: #b45309; }
.tt-sheet[data-tt-template="exam"] .tt-ev { color: #191410; border-left-width: 4px; }
.tt-sheet[data-tt-template="exam"] .tt-ev .tt-ev-time { color: #6b5f4b; }
.tt-sheet[data-tt-template="exam"] .ds-pri-high { color: #ffffff; background: #b45309; border-color: #b45309; }
.tt-sheet[data-tt-template="exam"] .tt-compact-day { background: #ffffff; border-color: #e8dfc8; }
.tt-sheet[data-tt-template="exam"] .ds-table tbody tr:nth-child(even) { background: #faf6ea; }

/* Custom: quiet slate, neutral chrome — the user's Build-Your-Own canvas */
.tt-sheet[data-tt-template="custom"] { background: #1d1f27; border-color: #2d2f3a; color: #f2f1f8; }
.tt-sheet[data-tt-template="custom"] .tt-sheet-title { color: #f2f1f8; font-family: var(--sans, system-ui, sans-serif); font-weight: 700; }
.tt-sheet[data-tt-template="custom"] .tt-sheet-meta,
.tt-sheet[data-tt-template="custom"] .tt-dayhead,
.tt-sheet[data-tt-template="custom"] .ds-month-head,
.tt-sheet[data-tt-template="custom"] .ds-tl-day,
.tt-sheet[data-tt-template="custom"] .ds-list-day { color: #8e8fa3; }
.tt-sheet[data-tt-template="custom"] .tt-daycol,
.tt-sheet[data-tt-template="custom"] .tt-daybody,
.tt-sheet[data-tt-template="custom"] .tt-dayhead { border-color: #2d2f3a; }
.tt-sheet[data-tt-template="custom"] .tt-hourline { background: #252834; }
.tt-sheet[data-tt-template="custom"] .ds-month-cell { background: #22242e; }
.tt-sheet[data-tt-template="custom"] .ds-month-head { background: #252834; }
.tt-sheet[data-tt-template="custom"] .tt-compact-day { background: #22242e; border-color: #2d2f3a; }
.tt-sheet[data-tt-template="custom"] .ds-tl-item,
.tt-sheet[data-tt-template="custom"] .ds-list-row:hover,
.tt-sheet[data-tt-template="custom"] .ds-table tbody tr:nth-child(even),
.tt-sheet[data-tt-template="custom"] .ds-table tbody tr:hover { background: #252834; }
.tt-sheet[data-tt-template="custom"] .ds-tl-item { border-color: #333644; }

/* ---------- print: ds host mirrors the tt host; both print clean ---------- */

#dsPrintHost { display: none; }

@media print {
  body > * { display: none !important; }
  body > #dsPrintHost, body > #ttPrintHost { display: block !important; }
  #dsPrintHost { position: static !important; }
  #dsPrintSheet { display: block !important; color: #111; background: #fff; font-family: Georgia, serif; }
  #dsPrintSheet h1 { font-size: 19pt; margin: 0 0 1pt; }
  #dsPrintSheet .tt-print-range { font-size: 9pt; color: #333; margin: 0 0 2pt; letter-spacing: .04em; text-transform: uppercase; }
  #dsPrintSheet .tt-print-meta { font-size: 8pt; color: #555; margin-bottom: 10pt; border-bottom: 1pt solid #999; padding-bottom: 6pt; }
  #dsPrintSheet table { width: 100%; border-collapse: collapse; font-size: 8pt; }
  #dsPrintSheet th, #dsPrintSheet td { border: .5pt solid #bbb; padding: 3pt 5pt; text-align: left; vertical-align: top; }
  #dsPrintSheet th { background: #eee; }
  #dsPrintSheet .tt-print-fixed td:last-child { font-weight: bold; }
}