@font-face{font-family:"Whiteboard Marker";src:url("../assets/fonts/PatrickHand-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* Paper and ink are deliberately fixed: this surface represents a physical board. */
.wb-page{display:flex;flex-direction:column;gap:16px}
.wb-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wb-toolbar h2{margin:0 0 6px;font-size:23px}
.wb-toolbar p,.wb-footnote{margin:0;color:var(--ds-text-muted);font-size:13px;line-height:1.5}
.wb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wb-sync{font-size:12px;color:var(--ds-text-muted)}
.wb-compose{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:16px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);background:var(--ds-bg1)}
.wb-compose label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}
.wb-compose .wb-compose-note{flex:1;min-width:240px}
.wb-compose textarea{resize:vertical;min-height:65px}
.wb-frame{border:10px ridge #bdc5cc;border-radius:10px;background:#fffef9;box-shadow:0 7px 18px #00000018;overflow-x:auto;min-height:420px;color:#193655}
.wb-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));width:100%;align-items:stretch}
.wb-column{min-width:0;padding:20px 12px 16px;height:min(620px,72vh);min-height:280px;max-height:620px;display:flex;flex-direction:column;overflow:hidden;border-right:2px solid #193655;border-bottom:2px solid #193655;box-sizing:border-box}
.wb-column:last-child{border-right:none}
.wb-column--collapsed{height:auto;min-height:0;max-height:none;align-self:start}
.wb-column-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:8px;position:relative}
.wb-column-heading-copy{min-width:0}
.wb-column-heading .wb-name{margin-bottom:25px}
.wb-column-heading .wb-person{margin:-18px 0 20px}
.wb-column--collapsed .wb-column-heading .wb-name{margin-bottom:12px}
.wb-column--collapsed .wb-column-heading .wb-person{margin:-7px 0 4px}
.wb-count{display:inline-flex;justify-content:center;align-items:center;min-width:26px;height:26px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:#e8eef8;color:#193655;font:700 12px/1 system-ui,sans-serif}
.wb-collapse-toggle.ds-btn,.wb-add-collapsed.ds-btn{grid-column:1/-1;justify-self:stretch;min-height:34px;padding:6px 8px;font-size:12px;white-space:nowrap}
.wb-add-collapsed.ds-btn{margin-top:6px}
.wb-column-content{min-height:0;display:flex;flex:1;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.wb-column-content[hidden]{display:none}
.wb-column-content .wb-requests{flex:0 0 auto}
.wb-column-content .wb-column-compose{flex:0 0 auto;margin-top:auto;padding-top:14px}
.wb-name,.wb-writing{font-family:"Whiteboard Marker","Chalkboard SE","Chalkboard","Segoe Print","Comic Sans MS",cursive;font-weight:400}
.wb-name{font-size:28px;text-align:center;margin:0 0 25px;padding-bottom:9px;border-bottom:3px solid #193655;border-radius:0 0 40% 10% / 0 0 9% 4%;transform:rotate(-1deg);overflow-wrap:anywhere;color:#193655}
.wb-note{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px;min-height:34px}
.wb-writing{font-size:22px;line-height:1.5;white-space:pre-wrap;color:#193655}
.wb-note--done .wb-writing{text-decoration:line-through;text-decoration-thickness:3px}
.wb-meta{font:11px/1.6 system-ui,sans-serif;color:#43536a;margin-top:7px}
.wb-meta .ds-badge{font-size:10px}
.wb-note .wb-actions{margin-top:10px}
.wb-note .ds-btn{font-size:11px;padding:5px 8px}
.wb-empty{font:13px/1.6 system-ui,sans-serif;color:var(--ds-text-muted);padding:12px 0}
.wb-frame .wb-empty{color:#52647a}
.wb-history{font:11px/1.6 system-ui,sans-serif;color:#43536a;margin:8px 0}
.wb-history summary{cursor:pointer}
.wb-history div{white-space:pre-wrap;margin-top:5px}
@media(max-width:700px){.wb-toolbar{flex-direction:column}.wb-compose{flex-direction:column;align-items:stretch}.wb-compose .wb-compose-note{min-width:0}}
.wb-person{font-family:"Whiteboard Marker","Chalkboard SE",cursive;text-align:center;font-size:19px;margin:-18px 0 24px;color:#43536a}
.wb-manager{padding:16px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);background:var(--ds-bg1)}
.wb-manager h3{margin:0 0 8px}.wb-manager p{color:var(--ds-text-muted);font-size:13px;line-height:1.5}
.wb-role-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-bottom:1px solid var(--ds-border);padding:14px 0;margin-bottom:12px}
.wb-role-row label{display:flex;flex-direction:column;gap:6px;font-size:12px}.wb-role-row .wb-toggle{flex-direction:row;align-items:center}
.wb-move-label{display:flex;flex-direction:column;gap:5px;margin-top:10px;font:11px system-ui,sans-serif;color:#43536a}
.wb-move-label select{max-width:100%;font-size:11px}
@media(max-width:700px){.wb-role-row{flex-direction:column;align-items:stretch}}
.wb-note .wb-open.ds-btn{display:block;width:100%;padding:0;border:0;background:transparent;box-shadow:none;text-align:left;border-radius:0;font-family:"Whiteboard Marker","Chalkboard SE","Chalkboard","Segoe Print","Comic Sans MS",cursive;font-size:22px;font-weight:400;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;flex:1;color:#193655}
.wb-note .wb-open.ds-btn:hover{text-decoration:underline;background:transparent}
.wb-note .wb-open.ds-btn:focus-visible{outline:2px solid #193655;outline-offset:4px}
/* Fixed red ink on the board's fixed white surface, including dark OS theme. */
.wb-note--urgent .wb-open.ds-btn{color:#b91c1c}
.wb-urgent-label{color:#b91c1c;font:700 11px/1.5 system-ui,sans-serif;margin-top:5px}
.wb-note--done .wb-open.ds-btn:hover{text-decoration:line-through}
.wb-compose .wb-toggle{flex-direction:row;align-items:center;font-weight:400}
.wb-import-task,.wb-import-role{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:12px}
.wb-import-task select{max-width:100%;width:100%}

.wb-row-menu{flex:0 0 28px;position:relative}
.wb-row-menu[open]{z-index:2}
.wb-row-menu>summary.ds-btn{list-style:none;cursor:pointer;background:transparent;color:#43536a;border:0;box-shadow:none;padding:3px 6px;font:24px/28px system-ui,sans-serif;text-align:center}
.wb-row-menu>summary::-webkit-details-marker{display:none}
.wb-row-menu>summary:focus-visible{outline:2px solid #193655}
.wb-menu-items{position:absolute;right:0;top:100%;width:195px;padding:8px;display:flex;flex-direction:column;gap:5px;background:var(--ds-bg1);border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);box-shadow:0 4px 12px #00000020}
.wb-menu-items>.ds-btn{text-align:left;white-space:normal}
.wb-menu-items .wb-move-label{color:var(--ds-text-muted)}
/* Request pages use the shared surface tokens; the handwritten board stays a board. */
.wb-detail{padding:24px;border-radius:16px;background:linear-gradient(135deg,var(--ds-bg0),var(--ds-bg1));color:var(--ds-text);display:flex;flex-direction:column;gap:24px;min-height:580px}
.wb-detail-back .ds-btn{border:0;background:transparent;box-shadow:none;padding-left:0;color:var(--ds-text-muted)}
.wb-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.wb-detail-header h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:8px 0 12px;overflow-wrap:anywhere}
.wb-detail-eyebrow{font-size:12px;color:var(--ds-text-dim);letter-spacing:.04em}
.wb-detail-subtitle{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ds-text-muted)}
.wb-detail .ds-btn--primary{background:linear-gradient(135deg,var(--ds-blue),#5943de);border-color:transparent;color:var(--ds-on-blue);box-shadow:0 4px 12px #5144dd18}
.wb-detail-tabs{display:flex;gap:16px;border-bottom:1px solid var(--ds-border)}
.wb-detail-tabs .ds-btn{border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none;background:transparent;padding:12px 16px;color:var(--ds-text-muted)}
.wb-detail-tabs .wb-detail-tab-selected{color:var(--ds-blue);border-bottom-color:var(--ds-blue)}
.wb-detail-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wb-detail-stats .ds-card{padding:20px;border-radius:12px;box-shadow:0 4px 18px #18294a05;gap:8px}
.wb-detail-stats span,.wb-detail-stats small{font-size:12px;color:var(--ds-text-dim)}
.wb-detail-stats strong{font-size:21px;overflow-wrap:anywhere}
.wb-detail-stats progress{width:100%;height:6px;accent-color:var(--ds-green)}
.wb-detail-card.ds-card{padding:24px;border-radius:12px;gap:18px}
.wb-detail-card h3{margin:0;font-size:18px}
.wb-detail-copy,.wb-detail-notes{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8}
.wb-detail-notes{border-top:1px solid var(--ds-border);padding-top:18px;color:var(--ds-text-muted)}
.wb-detail-reference{display:flex;flex-wrap:wrap;gap:24px;border-top:1px solid var(--ds-border);padding-top:18px;margin:0}
.wb-detail-reference dt{font-size:11px;color:var(--ds-text-dim);margin-bottom:6px}
.wb-detail-reference dd{font-size:13px;margin:0}
.wb-detail-fields{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.wb-detail label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ds-text-muted)}
.wb-detail .ds-input{width:100%;box-sizing:border-box;border-radius:8px}
.wb-detail textarea{resize:vertical;line-height:1.6}
.wb-detail-wide{grid-column:1/-1}
.wb-detail .wb-toggle{flex-direction:row;align-items:center}
.wb-detail-checkrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--ds-border)}
.wb-detail-checkrow label{flex-direction:row;align-items:center;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.wb-detail-checkrow input{accent-color:var(--ds-blue);width:17px;height:17px;flex-shrink:0}
.wb-detail-checkdone span{text-decoration:line-through;color:var(--ds-text-dim)}
.wb-detail-add{display:flex;gap:12px;align-items:flex-end;padding:18px;background:var(--ds-bg2);border-radius:10px}
.wb-detail-add label{flex:1}
.wb-detail-save{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-bg1);font-size:12px;color:var(--ds-text-muted)}
.wb-detail-hint{font-size:13px;color:var(--ds-text-dim)}
.wb-detail-error,.wb-detail-urgent{color:var(--ds-red);font-size:13px}
@media(max-width:800px){.wb-detail{padding:16px;gap:18px}.wb-detail-header{flex-direction:column}.wb-detail-header h2{font-size:25px}.wb-detail-stats{grid-template-columns:1fr}.wb-detail-fields{grid-template-columns:1fr}.wb-detail-tabs{gap:0}.wb-detail-tabs .ds-btn{padding:12px}.wb-detail-add,.wb-detail-save{flex-wrap:wrap}}
@media(prefers-color-scheme:dark){.wb-detail .ds-btn--primary{background:linear-gradient(135deg,var(--ds-blue),#b3a5ff)}}
.wb-board-layout.wb-frame{display:block;width:100%;min-width:0;box-sizing:border-box;overflow:visible}
.wb-inbox .wb-name{margin-bottom:12px}
.wb-inbox-hint{margin:0 0 18px;font:12px/1.5 system-ui,sans-serif;color:#52647a}
.wb-requests{min-width:0}
.wb-note[draggable="true"]{cursor:grab}
.wb-dragging{opacity:.5}
.wb-drop-ready{outline:3px dashed var(--ds-blue);outline-offset:-8px;background:#eff6ff}
.wb-admin-hint{font-size:11px;color:var(--ds-text-dim);line-height:1.5;margin-top:3px}

.wb-note[draggable="true"] .wb-open{cursor:grab}

.wb-column-compose.wb-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:0;margin:14px 0 0;gap:5px;background:transparent;border:0;border-radius:0;color:#43536a}
.wb-column-compose>label{min-width:0;font-size:0;gap:0}
.wb-column-compose .ds-input{width:100%;box-sizing:border-box;background:transparent;color:#193655}
.wb-column-compose textarea.wb-entry{font-family:"Whiteboard Marker","Chalkboard SE",cursive;font-size:17px;line-height:1.35;min-height:34px;padding:5px 6px;resize:vertical;overflow-wrap:anywhere;border:0;border-bottom:1px solid #cbd5e1;border-radius:0}
.wb-compose-actions{display:flex;flex-direction:column-reverse;align-items:center;gap:5px}
.wb-compose-actions .ds-btn{padding:4px 7px;font-size:11px;min-height:30px}
.wb-column-compose .wb-toggle{font-size:10px;white-space:nowrap;gap:3px}
.wb-column-compose .wb-toggle input{margin:0}
.wb-frame .wb-name{font-size:24px}
.wb-frame .wb-person{font-size:17px}
.wb-frame .wb-collapse-toggle.ds-btn,.wb-frame .wb-add-collapsed.ds-btn{font-family:system-ui,sans-serif;color:#193655}
@media(max-width:700px){.wb-column{height:min(560px,70vh);min-height:250px}.wb-column--collapsed{height:auto;min-height:0}.wb-column-heading{column-gap:6px}.wb-count{height:24px;min-width:24px}}
.wb-detail-fields{grid-template-columns:minmax(0,1fr)}
.wb-detail-stats .ds-btn{align-self:flex-start}