/* Layout: a dashboard of saved school cards (team, signed in) opens into a
   single-school workspace — logo + name, a row of quick-note stickies, then
   an auto-fill grid of category cards. Each card mirrors the Forms/Resources
   columns from the school pre-mind questionnaire, with that sheet's own
   example item shown so it stays easy to find, plus a notes strip — built
   for fast live entry on a call. A school's own link opens its board
   directly, no account needed, the same way a shared doc link works. */
:root{
  --bg:#f5f1e7;
  --surface:#ffffff;
  --surface-2:#ece5d2;
  --fg:#211f1a;
  --fg-muted:#827a64;
  --border:#ddd3b9;
  --accent:#3b4a5e;
  --accent-fg:#ffffff;
  --accent-soft:#e3e7ed;
  --danger:#b0483a;
  --danger-soft:#f6e2dd;
  --warn:#9a6c15;
  --warn-soft:#f3e7cd;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14191a;
    --surface:#1c2221;
    --surface-2:#242b29;
    --fg:#ece7da;
    --fg-muted:#9b9486;
    --border:#343c39;
    --accent:#9fb0c9;
    --accent-fg:#141a22;
    --accent-soft:#232b36;
    --danger:#e08776;
    --danger-soft:#3a211d;
    --warn:#e0b85c;
    --warn-soft:#3a3016;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14191a; --surface:#1c2221; --surface-2:#242b29; --fg:#ece7da;
  --fg-muted:#9b9486; --border:#343c39; --accent:#9fb0c9; --accent-fg:#141a22;
  --accent-soft:#232b36;
  --danger:#e08776; --danger-soft:#3a211d; --warn:#e0b85c; --warn-soft:#3a3016;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  padding-inline:20px;
  padding-block:24px;
  min-height:100%;
}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance;}
.mono{font-family:var(--font-mono);}
button{font:inherit;cursor:pointer;}
input,textarea{font:inherit;color:inherit;}
.app{max-width:1280px;margin-inline:auto;}
[hidden]{display:none!important;}

/* ---------- generic controls ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);background:var(--surface);color:var(--fg);
  padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-2);}
.btn-accent{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}
.btn-accent:hover{filter:brightness(1.05);}
.btn-ghost{border-color:transparent;background:transparent;padding:6px 10px;}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:4px 10px;font-size:12px;}

.field{
  border:1px solid transparent;background:transparent;border-radius:6px;
  padding:3px 6px;width:100%;transition:background .12s,border-color .12s;
}
.field:hover{background:var(--surface-2);}
.field:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.field::placeholder{color:var(--fg-muted);}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;
}
.pill-muted{background:var(--surface-2);color:var(--fg-muted);}
.pill-ok{background:var(--accent-soft);color:var(--accent);}
.pill-err{background:var(--danger-soft);color:var(--danger);}

/* ---------- dashboard ---------- */
#dashboard-view .topline{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:22px;
}
#dashboard-view h1{font-size:30px;font-weight:700;}
#dashboard-view .subtitle{color:var(--fg-muted);font-size:14px;margin-top:4px;}
.brand-row{display:flex;align-items:center;gap:14px;}
.brand-logo{width:52px;height:52px;border-radius:12px;flex:none;}
.topline-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.unanswered-btn{display:inline-flex;align-items:center;gap:6px;border-color:var(--warn);color:var(--warn);}
.unanswered-btn:hover{background:var(--warn-soft);}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;}
#search{max-width:260px;border:1px solid var(--border);border-radius:999px;padding:8px 14px;background:var(--surface);}
#search:focus{outline:none;border-color:var(--accent);}

.school-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;
}
.school-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.school-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px -10px rgba(0,0,0,.35);}
.school-card .tile{
  width:46px;height:46px;border-radius:10px;background:var(--accent);color:var(--accent-fg);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:16px;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.school-card .name{font-family:var(--font-display);font-weight:700;font-size:16px;}
.school-card .meta{font-size:11px;color:var(--fg-muted);font-family:var(--font-mono);}
.school-card .meta.creator{margin-top:2px;opacity:.75;}
.school-card .del{
  position:absolute;top:10px;right:10px;border:none;background:transparent;color:var(--fg-muted);
  font-size:13px;padding:4px 7px;border-radius:6px;opacity:.6;
}
.school-card .del:hover{opacity:1;background:var(--accent-soft);color:var(--accent);}

.empty-state{
  border:1.5px dashed var(--border);border-radius:16px;padding:48px 24px;text-align:center;
  color:var(--fg-muted);
}
.empty-state h3{color:var(--fg);font-size:19px;margin-bottom:8px;}
.empty-state .btn{margin-top:16px;}

/* ---------- board ---------- */
#board-view .board-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;
}
.identity{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px;}
.logo-wrap{position:relative;flex:none;}
.logo-tile{
  width:68px;height:68px;border-radius:16px;background:var(--accent);color:var(--accent-fg);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:24px;flex:none;cursor:pointer;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.logo-tile:hover{opacity:.85;}
.logo-remove-btn{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--fg-muted);
  font-size:14px;line-height:1;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.logo-remove-btn:hover{color:var(--fg);background:var(--surface-2);}
.identity-text{min-width:0;flex:1;}
#school-name{font-family:var(--font-display);font-size:28px;font-weight:700;padding:2px 8px;margin-left:-8px;}
.meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-left:-6px;}
.meta-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--fg-muted);margin-left:8px;}
.meta-label:first-child{margin-left:0;}
.state-field{display:inline-block;width:auto;font-size:13px;color:var(--fg-muted);padding:3px 6px;border:1px solid transparent;background:transparent;}
.state-field:hover{background:var(--surface-2);}
.sis-field{width:110px;}
.sis-field::placeholder{color:var(--fg-muted);}
.hex-field{width:100px;}
.hex-field::placeholder{color:var(--fg-muted);}
.website-field{width:190px;}
.website-field::placeholder{color:var(--fg-muted);}
.website-open-link{margin-left:4px;color:var(--fg-muted);text-decoration:none;font-size:14px;}
.website-open-link:hover{color:var(--fg);}
.campus-count-field{width:52px;text-align:center;}
.identity .created{font-size:12px;color:var(--fg-muted);font-family:var(--font-mono);padding-left:8px;}

/* ---------- new school modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:28px;width:100%;max-width:380px;
}
.modal-wide{max-width:560px;}
.modal h2{font-size:20px;margin-bottom:18px;}
.modal-label{display:block;font-size:12.5px;font-weight:600;color:var(--fg-muted);margin:14px 0 4px;}
.modal-label:first-of-type{margin-top:0;}
.modal-field{border:1px solid var(--border);border-radius:8px;padding:9px 11px;background:var(--surface);}
.modal-field:hover{background:var(--surface);}
.modal-error{color:var(--danger);font-size:12.5px;margin-top:12px;}
.modal-success{color:var(--accent);font-size:12.5px;margin-top:12px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}

/* ---------- "Show me how" quick guide ---------- */
.howto-modal{max-width:540px;}
.howto-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.howto-head h2{margin-bottom:0;}
.howto-close{
  flex:none;border:none;background:none;color:var(--fg-muted);cursor:pointer;
  font-size:22px;line-height:1;padding:0 2px;
}
.howto-close:hover{color:var(--fg);}
.howto-text{font-size:14px;line-height:1.55;color:var(--fg-muted);margin:10px 0 18px;}
/* The mock is a real department card (same buildCategoryCard markup used on
   the board) rendered inert, so it looks pixel-identical to the real thing
   instead of risking drifting out of sync with a hand-built approximation. */
.howto-mock{
  border:1px solid var(--border);border-radius:10px;padding:14px;
  background:var(--bg);overflow-x:auto;
}
/* Real department cards never shrink below 400px (.cat-grid uses
   minmax(400px,1fr) and lets the board scroll horizontally instead) — give
   the mock the same floor plus horizontal scroll so it can't get squished
   narrower than a real card ever would be, which was garbling its text. */
.howto-mock .cat-card{pointer-events:none;min-width:400px;}
.howto-highlight{
  box-shadow:0 0 0 2px var(--accent) inset;border-radius:8px;
  transition:box-shadow .15s ease;
}
.howto-done{font-size:46px;text-align:center;color:var(--accent);padding:28px 0;}
.howto-note{font-size:12.5px;font-style:italic;color:var(--fg-muted);text-align:center;margin:-16px 0 0;}
.howto-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:12px;}
.howto-dots{display:flex;align-items:center;gap:6px;}
.howto-dot{width:7px;height:7px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;}
.howto-dot.is-active{background:var(--accent);width:16px;border-radius:4px;}
.howto-actions{display:flex;gap:8px;}
.status-manage-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.status-manage-row{display:flex;align-items:center;gap:8px;}
.status-manage-move{display:flex;flex-direction:column;flex:none;}
.status-manage-move-btn{
  width:18px;height:14px;padding:0;border:1px solid var(--border);background:var(--surface);
  color:var(--fg-muted);font-size:9px;line-height:1;cursor:pointer;border-radius:3px;
}
.status-manage-move-btn:first-child{margin-bottom:2px;}
.status-manage-move-btn:disabled{opacity:.35;cursor:default;}
.status-manage-move-btn:not(:disabled):hover{color:var(--fg);}
.status-manage-row .status-manage-color{
  width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:6px;
  background:none;cursor:pointer;flex:none;
}
.status-manage-row .status-manage-label{flex:1;min-width:0;}
.status-manage-row .status-manage-remove{flex:none;}
.share-link-row{display:flex;gap:8px;}
.share-link-row .field{flex:1;}

.member-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;margin-bottom:4px;}
.member-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.member-row .member-email{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.member-row .btn{flex:none;}
.member-row .btn{padding:4px 9px;font-size:12px;}
.member-row .member-remove:hover{color:var(--danger);background:var(--danger-soft);}
.member-empty{font-size:12.5px;color:var(--fg-muted);padding:4px 0;}

.unanswered-list{display:flex;flex-direction:column;gap:18px;max-height:60vh;overflow-y:auto;margin:16px 0;}
.unanswered-empty{font-size:13px;color:var(--fg-muted);padding:4px 0;}
.unanswered-school-group{display:flex;flex-direction:column;gap:8px;}
.unanswered-school-head{display:flex;align-items:center;gap:8px;}
.unanswered-school-name{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--fg);text-decoration:underline;
  text-underline-offset:2px;
}
.unanswered-school-name:hover{color:var(--accent);}

/* ---------- login ---------- */
#login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:32px;width:100%;max-width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.login-card h1{font-family:var(--font-display);font-size:22px;margin-bottom:6px;}
.login-card .subtitle{margin-bottom:18px;}
.login-card .modal-actions{justify-content:stretch;}
.login-card .modal-actions .btn{flex:1;}

#share-gate-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.share-gate-card{text-align:center;}
.share-gate-logo{width:48px;height:48px;border-radius:12px;display:block;margin:0 auto 16px;}
.share-gate-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fg-muted);margin-bottom:6px;
}
.share-gate-card h1{font-family:var(--font-display);font-size:24px;margin-bottom:6px;}
.share-gate-card .subtitle{margin-bottom:20px;}
.share-gate-note{
  font-size:12px;font-style:italic;color:var(--fg-muted);line-height:1.5;
  margin-bottom:16px;
}
.share-gate-card .modal-label{text-align:left;}
.share-gate-card .modal-actions{justify-content:stretch;}
.share-gate-card .modal-actions .btn{flex:1;}

.qa-section{margin-top:26px;}
.qa-summary{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;
  padding:12px 14px;margin:0;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--fg);
  transition:filter .12s;
}
.qa-summary:hover{filter:brightness(0.97);}
.qa-summary-icon{font-size:20px;line-height:1;flex:none;}
.qa-summary-text{display:flex;flex-direction:column;gap:1px;}
.qa-summary-title{font-size:13.5px;font-weight:700;}
.qa-summary-hint{font-size:11.5px;color:var(--fg-muted);}
.qa-badge{
  background:var(--danger);color:#fff;border-radius:999px;min-width:17px;height:17px;
  padding:0 5px;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  text-transform:none;letter-spacing:0;
}
.qa-caret{margin-left:auto;transition:transform .15s ease;font-size:11px;color:var(--fg-muted);}
.qa-summary.is-open .qa-caret{transform:rotate(90deg);}
.qa-body{margin-top:10px;}
.qa-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.qa-empty{font-size:12.5px;color:var(--fg-muted);}
.qa-item{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
}
.qa-item-unanswered{border-color:var(--danger);}
.qa-question-row{display:flex;align-items:flex-start;gap:8px;}
.qa-question-text{flex:1;font-size:13px;line-height:1.4;color:var(--fg);font-weight:600;}
.qa-awaiting{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--danger);margin-top:4px;}
.qa-answer-input{
  display:block;width:100%;min-height:46px;resize:vertical;margin-top:6px;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:8px 10px;color:var(--fg);font-size:13px;line-height:1.4;font-family:var(--font-body);
}
.qa-answer-input::placeholder{color:var(--fg-muted);}
.qa-answer-input:focus{outline:none;border-color:var(--accent);}
.qa-add-row{display:flex;gap:8px;}
.qa-add-row .field{flex:1;}
.qa-answer-actions{display:flex;justify-content:flex-end;margin-top:8px;}

.edit-history-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
.edit-history-summary{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-size:12px;color:var(--fg-muted);font-family:var(--font-mono);
}
.edit-history-summary:hover{color:var(--fg);}
.edit-history-summary:disabled{cursor:default;}
.edit-history-summary:disabled:hover{color:var(--fg-muted);}
.edit-history-list{margin-top:10px;display:flex;flex-direction:column;gap:5px;}
.edit-history-row{font-size:12px;color:var(--fg-muted);font-family:var(--font-mono);}
.edit-history-row strong{color:var(--fg);font-weight:600;}

.priority-panel{margin-bottom:26px;}
.priority-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.priority-panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);}
.priority-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;}
.priority-item{
  display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;font-size:12px;
}
.priority-item .priority-item-dept{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--fg-muted);}
.priority-item .priority-item-text{color:var(--fg);line-height:1.35;}
.priority-empty{font-size:12.5px;color:var(--fg-muted);font-style:italic;}

.board-top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.items-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.subtitle-line{
  font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;
  padding-left:8px;margin:2px 0;
}

.tab-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.add-dept-row{display:flex;justify-content:flex-end;margin-bottom:18px;}
.legend-footer{margin-top:24px;padding-top:12px;border-top:1px solid var(--border);}
.legend-line{font-size:11px;font-style:italic;color:var(--fg-muted);line-height:1.5;margin-bottom:6px;}
.legend-line:last-child{margin-bottom:0;}
.legend-line strong{color:var(--fg-muted);font-style:italic;}
.tab-switch{display:flex;gap:6px;margin:0;}
.tab-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--fg-muted);
  padding:7px 16px;border-radius:999px;font-size:13px;font-weight:600;
}
.tab-btn:hover{background:var(--surface-2);}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px;perspective:1200px;}
.cat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
}
.cat-head{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);
}
.cat-head h3{font-size:14px;font-weight:700;flex:1;min-width:0;}
.cat-head-right{display:flex;align-items:center;gap:8px;flex:none;}
.cat-head .count{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);font-variant-numeric:tabular-nums;}
.examples-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--accent);
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.cat-del{
  border:none;background:transparent;color:var(--fg-muted);
  font-size:13px;padding:4px 7px;border-radius:5px;line-height:1;
}
.cat-del:hover{color:var(--danger);background:var(--danger-soft);}
.cat-del.confirm{color:#fff;background:var(--danger);font-weight:600;}
.examples-btn:hover{background:var(--accent-soft);}

.cat-card{transition:transform .2s ease, opacity .2s ease;}
.cat-card.flip-mid{transform:rotateY(90deg) scale(.97);opacity:0;}
@media (prefers-reduced-motion: reduce){.cat-card{transition:none;}}

.cat-back{padding:12px 14px;}
.cat-back-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
.cat-back-head h3{font-size:13px;font-weight:700;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.03em;}
.back-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--fg);
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.back-btn:hover{background:var(--surface-2);}
.cat-back-cols{display:flex;}
.cat-back-col{flex:1;min-width:0;padding:0 14px;}
.cat-back-col:first-child{padding-left:0;}
.cat-back-col:last-child{padding-right:0;}
.cat-back-col + .cat-back-col{border-left:1px solid var(--border);}
.cat-back-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;color:var(--fg);}
.example-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.example-list li{
  font-size:12px;color:var(--fg-muted);line-height:1.4;padding-left:11px;position:relative;
}
.example-list li::before{content:'–';position:absolute;left:0;color:var(--border);}
.cat-front{display:flex;flex-direction:column;flex:1;min-height:0;}
.cat-cols{display:flex;flex:1;}
.cat-col{flex:1;min-width:0;padding:10px 10px;}
.cat-col + .cat-col{border-left:1px solid var(--border);}
.col-label{font-size:11px;color:var(--fg);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
.col-example{font-size:11.5px;color:var(--fg-muted);font-style:italic;margin-bottom:8px;line-height:1.3;}
.quick-add{width:100%;font-size:13px;padding:4px 2px;border:none;border-bottom:1px solid var(--border);background:transparent;margin-bottom:8px;}
.quick-add::placeholder{color:var(--fg-muted);}
.quick-add:focus{outline:none;border-bottom-color:var(--accent);}
.item-list{display:flex;flex-direction:column;gap:4px;}
.item-row{display:flex;align-items:flex-start;gap:4px;background:var(--surface-2);border-radius:6px;padding:4px 2px 4px 8px;transition:background .12s;}
.item-row textarea{
  flex:1;min-width:0;background:transparent;border:none;font-size:10.5px;line-height:1.35;
  padding:4px 2px;font-family:inherit;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;
}
.item-row textarea:focus{outline:none;}
.item-row .item-status-wrap{flex:none;position:relative;margin-top:4px;}
.item-row .item-status-btn{
  width:14px;height:14px;padding:0;display:block;border-radius:4px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;position:relative;
}
.item-row .item-status-btn:focus{outline:none;border-color:var(--accent);}
/* Positioned with inline top/left (viewport coords) and appended straight to
   <body> (see buildItemRow in app.js) rather than nested in the card, so it
   isn't clipped by .cat-card's overflow:hidden. */
.item-status-menu{
  position:fixed;z-index:200;min-width:128px;max-height:260px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);padding:4px;display:none;
}
.item-status-menu.open{display:block;}
.item-status-menu button{
  display:block;width:100%;text-align:left;background:transparent;border:none;
  padding:5px 8px;font-size:10.5px;border-radius:4px;cursor:pointer;color:var(--fg);
}
.item-status-menu button:hover{background:var(--surface-2);}
.item-status-menu button.active{font-weight:700;text-decoration:underline;}
.item-row .rm{border:none;background:transparent;color:var(--fg-muted);font-size:13px;padding:4px 7px;border-radius:5px;line-height:1;margin-top:2px;}
.item-row .rm:hover{color:var(--danger);background:var(--danger-soft);}
.item-row .item-status-btn.is-done::after{
  content:'';position:absolute;left:3px;top:0px;width:4px;height:7px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(40deg);
}
.cat-poc{
  display:flex;background:var(--accent-soft);border-bottom:1px solid var(--border);
  padding:7px 10px;
}
.cat-poc[hidden]{display:none;}
.poc-enter-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--accent);
  font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.poc-enter-btn:hover{background:var(--accent-soft);}
.poc-enter-btn-filled{color:var(--fg);}

/* ---------- POC modal ---------- */
.poc-modal-list{display:flex;flex-direction:column;gap:12px;max-height:50vh;overflow-y:auto;margin:14px 0;}
.poc-modal-empty{font-size:13px;color:var(--fg-muted);}
.poc-modal-row{border:1px solid var(--border);border-radius:10px;padding:10px;}
.poc-modal-row-main{border-color:var(--accent);}
.poc-modal-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.poc-modal-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);}
.poc-modal-row-main .poc-modal-tag{color:var(--accent);}
.poc-modal-row-actions{display:flex;gap:6px;flex:none;}
.poc-modal-make-main,.poc-modal-remove{
  border:1px solid var(--border);background:var(--surface);color:var(--fg-muted);
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.poc-modal-make-main:hover{color:var(--accent);background:var(--accent-soft);}
.poc-modal-remove:hover{color:var(--danger);background:var(--danger-soft);}
.poc-modal-fields{display:flex;flex-wrap:wrap;gap:8px;}
.poc-modal-field{flex:1;min-width:140px;}

/* Campuses reuse the exact department-card markup (.cat-card) but sit in
   their own labeled section with a warm accent (vs. the cool blue used
   everywhere else) so they read as a clearly separate kind of bucket. */
.campus-section{margin-top:20px;padding-top:16px;border-top:1px dashed var(--border);}
.campus-section-title{font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:12px;color:var(--warn);}
.cat-card-campus{border-color:var(--warn);}
.cat-card-campus .cat-head{background:var(--warn-soft);}
.cat-card-campus .cat-poc{background:var(--warn-soft);}
.campus-name-input{
  flex:1;min-width:0;border:none;background:transparent;font-size:14px;font-weight:700;
  color:var(--fg);padding:0;
}
.campus-name-input:focus{outline:none;}
.campus-name-input::placeholder{color:var(--fg-muted);font-weight:400;}

.poc-directory{margin-bottom:16px;}
.poc-directory-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.poc-directory-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);margin-bottom:0;}
.tab-switch-title{margin-bottom:8px;}
.poc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.poc-card{
  background:var(--accent-soft);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px;
}
.poc-card-dept{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);margin-bottom:2px;}
.poc-card-name{font-size:13px;font-weight:600;color:var(--fg);}
.poc-card-title{font-size:12px;color:var(--fg-muted);}
.poc-card-email{font-size:12px;color:var(--accent);text-decoration:none;word-break:break-all;}
.poc-card-email:hover{text-decoration:underline;}

.deleted-dept-section{margin-top:16px;}
.deleted-dept-list{display:flex;flex-direction:column;gap:6px;}
.deleted-dept-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--fg-muted);background:var(--surface-2);border-radius:8px;padding:6px 10px;
}

.cat-notes{
  border-top:1px solid var(--border);background:var(--surface-2);
}
.cat-notes textarea{
  width:100%;min-height:44px;border:none;background:transparent;padding:8px 12px;resize:vertical;font-size:12.5px;color:var(--fg-muted);
}
.cat-notes textarea:focus{outline:none;color:var(--fg);}
.cat-notes textarea::placeholder{color:var(--fg-muted);}

.banner{
  border:1px solid var(--border);background:var(--surface-2);border-radius:10px;
  padding:14px 16px;font-size:13px;color:var(--fg-muted);margin-bottom:18px;
}

@media (max-width:480px){
  .identity{gap:10px;}
  #school-name{font-size:22px;}
  .topline-actions{width:100%;justify-content:flex-start;}
}

/* ---------- visualize inputs ----------
   A full-screen org-chart of every form/resource in the school, drawn as an
   SVG tree (school -> audience tab -> department -> Forms/Resources -> items).
   The stage deliberately stays light in dark mode: it doubles as the artwork
   people export to PNG and paste into decks, so it needs to look the same
   everywhere rather than follow the app theme. */
.viz-overlay{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--surface);
}
.viz-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg);
}
.viz-top-left,.viz-top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.viz-title{font-family:var(--font-display);font-size:15px;font-weight:700;}
.viz-check{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-muted);
  user-select:none;cursor:pointer;
}
.viz-orient{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.viz-orient-btn{
  border:none;background:var(--bg);color:var(--fg-muted);font-size:12px;font-family:inherit;
  padding:6px 10px;cursor:pointer;
}
.viz-orient-btn + .viz-orient-btn{border-left:1px solid var(--border);}
.viz-orient-btn.is-active{background:var(--accent);color:var(--accent-fg);}
.viz-scope{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.viz-scope-btn{
  border:none;background:var(--bg);color:var(--fg-muted);font-size:12px;font-family:inherit;
  padding:6px 10px;cursor:pointer;
}
.viz-scope-btn + .viz-scope-btn{border-left:1px solid var(--border);}
.viz-scope-btn.is-active{background:var(--warn);color:#fff;}
.viz-zoom{display:flex;align-items:center;gap:6px;}
#viz-zoom-level{min-width:52px;text-align:center;}
.viz-stage{
  position:relative;flex:1;overflow:hidden;background:#f1f1f3;
  cursor:grab;touch-action:none;
}
.viz-stage.is-panning{cursor:grabbing;}
.viz-stage svg{display:block;width:100%;height:100%;}
.viz-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#6b6b73;pointer-events:none;
}