/* Workbench layer: Today, contacts, tasks groups, graph, editor and help. Same Graphide tokens as styles.css. */
main:focus{outline:none}
/* ---------- checkboxes: the app's tick, 3px corners, accent when on */
.today-task input,.todo-list-item>input,.workspace-editor .link-option input,.markdown-content input[type=checkbox]{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:2px 0 0;flex-shrink:0;border:1.5px solid var(--faint);border-radius:4px;background:var(--sunken) center/11px no-repeat;cursor:pointer;transition:background-color var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out)}
.today-task input:hover,.todo-list-item>input:hover,.link-option input:hover{border-color:var(--accent)}
.today-task input:checked,.todo-list-item>input:checked,.workspace-editor .link-option input:checked,.markdown-content input[type=checkbox]:checked{background-color:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.3 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme=dark] .today-task input:checked,:root[data-theme=dark] .todo-list-item>input:checked,:root[data-theme=dark] .workspace-editor .link-option input:checked,:root[data-theme=dark] .markdown-content input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.3 4.6-5' fill='none' stroke='%2304120f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.today-task input:disabled{opacity:.5;cursor:progress}
/* ---------- Today */
.stat-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.stat-tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px 11px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--panel);overflow:hidden;transition:border-color var(--t-fade) var(--ease-out)}
.stat-tile:hover{border-color:var(--accent-soft)}
.stat-tile span{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat-tile strong{font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--bright);font-variant-numeric:tabular-nums}
.stat-tile.alert{border-color:var(--error-edge);background:var(--error-wash)}
.stat-tile.alert::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--error)}
.stat-tile.alert strong{color:var(--error)}
.today-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:16px;align-items:start}
.today-grid>*,.contact-grid>*,.today-bottom>*{min-width:0}
.today-side{display:flex;flex-direction:column;gap:16px}
.today-list{list-style:none;margin:0;padding:6px}
.today-list li{border-top:0}
.today-task{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:var(--r-field)}
.today-task a{flex:1;min-width:0}
.today-task strong{display:block;font-size:13px;font-weight:500;line-height:1.4;overflow-wrap:anywhere;color:var(--bright)}
.today-task small{display:block;margin-top:2px;font:400 10.5px var(--mono);color:var(--muted)}
.today-task.overdue{box-shadow:inset 3px 0 var(--error);background:var(--error-wash)}
.today-task.overdue small{color:var(--error)}
.today-task:hover{background:var(--hover)}
.today-task.overdue:hover{background:var(--error-wash)}
.today-task .row-action{margin-left:auto}
.today-list.quiet .today-task strong{color:var(--text);font-weight:450}
.today-subhead{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 16px 4px;border-top:1px solid var(--line)}
.today-empty{padding:30px 24px 32px;text-align:center}
.today-empty strong{font-size:15px;font-weight:600;color:var(--bright);display:block;margin-bottom:6px}
.today-empty p{color:var(--muted);font-size:12.5px;line-height:1.55;margin:0 0 14px}
.today-empty.slim{padding:6px 18px 20px}
.today-empty.slim::before{display:none}
.today-link{display:flex;align-items:center;justify-content:space-between;gap:12px;height:34px;padding:0 10px;border-radius:var(--r-field);font-size:13px}
.today-link:hover{background:var(--hover)}
.today-link strong{font-weight:500;color:var(--bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-bottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:16px}
.today-list.compact{padding-bottom:6px}
.row-action{align-self:center;flex-shrink:0;font-size:11.5px;font-weight:500;color:var(--text);border:1px solid var(--line);border-radius:var(--r-chip);height:24px;padding:0 8px;background:transparent}
.row-action:hover{background:var(--hover-strong);color:var(--bright);border-color:var(--faint)}
/* ---------- contacts */
.contacts-table{table-layout:auto;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--panel)}
.contacts-table th:first-child{width:38%}
.contacts-table th:last-child{width:auto}
.contacts-table td{vertical-align:middle;font-size:12px}
.contacts-table td:last-child{padding:9px 14px 9px 16px}
.contacts-table .num,.contacts-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.contacts-table .time-col{white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--muted)}
.contact-cell{display:flex;align-items:center;gap:12px;min-width:0}
.contact-cell span:last-child{min-width:0}
.contact-cell strong{display:block;font-size:13px;font-weight:600;color:var(--bright)}
.contact-cell small{display:block;margin-top:1px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.contact-cell:hover strong{color:var(--accent)}
.table-empty{text-align:center;padding:44px 20px!important;color:var(--muted)!important}
.contact-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.contact-id{display:flex;align-items:center;gap:14px}
.contact-id .avatar{width:48px;height:48px;font-size:20px;border-radius:12px}
.contact-id h1{font-size:22px;letter-spacing:-.02em;margin:0 0 3px}
.contact-x{display:inline-flex;align-items:center;gap:6px;font:400 12px var(--mono);color:var(--muted)}
.contact-x:hover{color:var(--accent)}
.contact-x .icon{width:13px;height:13px}
.contact-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.contact-actions .bookmark-button{width:30px;height:30px;padding:7px;border:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:16px;align-items:start}
.contact-main,.side-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel)}
.contact-main{padding:16px 18px 14px}
.field-row .segmented{justify-self:start}
.field-row{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:14px;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.tag-editor{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:var(--r-field);padding:4px 8px;background:var(--field);min-height:32px}
.tag-editor input{flex:1;min-width:140px;border:0;outline:none!important;box-shadow:none!important;background:none;font-size:12px;padding:3px 2px;color:var(--bright)}
.tag-editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.notes-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.notes-head label{font-size:12px;font-weight:500;color:var(--text)}
.notes-head label span{color:var(--muted);font:400 10.5px var(--mono);margin-left:6px}
.notes-head .segmented{margin-left:auto}
.save-state{font:400 10.5px var(--mono);color:var(--muted);min-width:90px;text-align:right}
.notes-head .segmented+.save-state{margin-left:0}
.save-state[data-kind=error]{color:var(--error)}
#contact-notes,.notes-preview{width:100%;border:1px solid var(--line);border-radius:var(--r-field);background:var(--field);padding:12px 14px;font:400 12.5px/1.6 var(--mono);color:var(--bright);min-height:300px}
#contact-notes{resize:vertical}
.notes-preview{overflow:auto;font:400 13px/1.6 var(--sans);background:var(--field)}
.notes-preview.tall{min-height:380px;margin-bottom:6px}
.contact-main .form-note{margin:8px 0 0}
.side-card{padding:14px 16px;margin-bottom:14px}
.side-card h2{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.side-card-head{display:flex;justify-content:space-between;align-items:baseline}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{padding:8px 0;border-top:1px solid var(--line-soft)}
.side-list li:first-child{border-top:0}
.side-list a{font-size:12.5px;font-weight:500;color:var(--bright);overflow-wrap:anywhere}
.side-list a:hover{color:var(--accent)}
.side-list .done{text-decoration:line-through;color:var(--muted)}
.side-list small{display:block;margin-top:2px;font:400 10.5px var(--mono);color:var(--muted)}
.side-done{margin-top:8px;font-size:11.5px;color:var(--muted)}
.side-done summary{cursor:pointer;padding:6px 0}
.facts{margin:0;display:grid;gap:8px}
.facts div{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;text-align:right;overflow-wrap:anywhere;color:var(--bright)}
.facts code{font:400 11px var(--mono)}
.compiled summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--bright)}
.compiled-body{margin-top:12px;display:grid;gap:10px}
.reader-frame.compact{height:240px;min-height:0;border:1px solid var(--line);border-radius:var(--r-field)}
/* ---------- tasks */
.todo-group{padding:12px 14px 5px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-soft)}
.todo-group:first-child{border-top:0}
.todo-group.alert{color:var(--error)}
.todo-list-select b{font-weight:500}
.todo-list-select b.overdue{color:var(--error);font-weight:600}
.date-chips{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.date-chips button{font-size:11px;font-weight:500;border:1px solid var(--line);border-radius:var(--r-chip);height:22px;padding:0 8px;color:var(--text);background:transparent}
.date-chips button:hover{background:var(--hover-strong);border-color:var(--faint)}
.todo-dirty{font-size:11.5px;color:var(--warning);margin-left:auto;margin-right:14px}
.todo-save{gap:6px}
.todo-detail-empty kbd{margin:0 2px}
.todo-list-panel{position:relative}
.todo-list{overflow-y:auto;max-height:calc(100vh - 330px);min-height:240px}
.todo-detail-panel{min-width:0}
/* ---------- graph: dotted canvas, thin mint edges, a ring and glow on the focused node */
.large-graph{display:block;width:100%;height:auto;aspect-ratio:1040/560;max-height:68vh;background:radial-gradient(circle,var(--ground-dot) 1px,transparent 1.3px) 0 0/20px 20px,var(--ground);border-bottom:1px solid var(--line-soft)}
.graph-line{stroke:var(--edge-rest);stroke-width:1;fill:none;transition:opacity var(--t-fade) var(--ease-out),stroke var(--t-fade) var(--ease-out)}
.graph-line.dashed{stroke-dasharray:4 5}
.graph-node{cursor:pointer;transition:opacity var(--t-fade) var(--ease-out)}
.graph-node circle{stroke:var(--ground);stroke-width:3;fill:var(--hue-rust);transition:stroke-width var(--t-fade) var(--ease-out)}
.graph-node .node-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transition:opacity var(--t-fade) var(--ease-out)}
.graph-node:hover .node-ring,.graph-node.hot .node-ring,.graph-node:focus-visible .node-ring{opacity:1;filter:drop-shadow(0 0 7px var(--glow))}
.graph-node.rust circle:not(.node-ring){fill:var(--hue-rust)}
.graph-node.blue circle:not(.node-ring){fill:var(--hue-blue)}
.graph-node.green circle:not(.node-ring){fill:var(--hue-green)}
.graph-node.gold circle:not(.node-ring){fill:var(--hue-gold)}
.graph-node text{font:500 11px var(--sans);fill:var(--text);pointer-events:none;paint-order:stroke;stroke:var(--ground);stroke-width:3px;stroke-linejoin:round}
.large-graph{--dim:.28}
:root:not([data-theme=dark]) .large-graph{--dim:.4}
.large-graph.focused .graph-node{opacity:var(--dim)}
.large-graph.focused .graph-line{opacity:.15}
.large-graph.focused .graph-node.hot{opacity:1}
.large-graph.focused .graph-line.hot{opacity:1;stroke:var(--edge-lit);stroke-width:1.75;filter:drop-shadow(0 0 3px var(--glow))}
.graph-node:focus-visible{outline:none}
.graph-legend{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px}
.graph-legend button{display:flex;gap:7px;align-items:center;font-size:12px;font-weight:500;color:var(--text);height:26px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-chip)}
.graph-legend button:hover{background:var(--hover-strong)}
.graph-legend button.off{opacity:.5;text-decoration:line-through}
.graph-info{font-size:12px;color:var(--muted);padding:2px 16px 14px;line-height:1.55}
/* ---------- editor */
.workspace-editor{width:min(880px,calc(100vw - 24px))}
.workspace-editor #workspace-body{min-height:340px}
.workspace-editor .notes-head{margin-top:16px}
.workspace-editor .notes-head label{margin:0;flex:1}
.link-picker{border:1px solid var(--line);border-radius:var(--r-field);background:var(--sunken)}
.link-picker>input{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:var(--r-field) var(--r-field) 0 0!important;background:transparent!important;box-shadow:none!important}
.link-list{max-height:170px;overflow:auto;padding:6px}
.workspace-editor .link-option{display:flex;align-items:center;gap:10px;margin:0;padding:5px 8px;border-radius:var(--r-chip);font-size:12.5px;color:var(--text);cursor:pointer}
.link-option:hover{background:var(--hover)}
.workspace-editor .link-option input{width:15px;height:15px;padding:0;margin:0}
.link-option span{flex:1;color:inherit;font-size:12.5px}
.link-option small{font:400 10.5px var(--mono);color:var(--muted)}
.editor-actions{display:flex;align-items:center;gap:14px;margin-top:6px}
.editor-actions .primary-button{width:auto!important;padding:0 18px}
.editor-actions .form-note{margin:0}
.editor-actions .danger{margin-left:auto}
.workspace-editor .banner{margin-top:-6px}
/* ---------- help */
.help-dialog{width:min(720px,calc(100vw - 24px))}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:6px}
.shortcut-grid h3{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.shortcut-grid dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 20px;align-items:center}
.shortcut-grid dt{white-space:nowrap}
.shortcut-grid dd{margin:0;font-size:12.5px;color:var(--text)}
.shortcut-grid kbd{margin-right:2px}
@media(max-width:1100px){
  .stat-strip{grid-template-columns:repeat(3,1fr)}
  .today-grid,.contact-grid{grid-template-columns:1fr}
  .shortcut-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .contact-head{align-items:flex-start}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat{padding:11px 12px}
  .contact-id h1{font-size:20px}
  .field-row{grid-template-columns:1fr;gap:8px}
  .inline-search{min-width:0;width:100%}
  .contacts-table th:nth-child(3),.contacts-table td:nth-child(3),.contacts-table th:nth-child(5),.contacts-table td:nth-child(5){display:none}
  .view-options{flex-wrap:wrap}
  .large-graph{max-height:none}
}
