@import url('tokens.css');

:root { --gap:1rem; --pad:1rem; --control:2.5rem; font:100%/1.5 var(--font-body); }
:root[data-density=compact] { --pad:.75rem; --gap:.75rem; --control:2rem; }
:root[data-density=touch] { --pad:1.25rem; --gap:1.25rem; --control:3rem; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--fg); } [hidden] { display:none !important; }
a { color:inherit; text-underline-offset:.2em; } button,input,select { font:inherit; color:inherit; } button,select,input:not([type=checkbox]) { min-height:var(--control); border:1px solid var(--border); border-radius:.35rem; background:var(--surface); padding:.4rem .75rem; max-width:100%; } button { background:var(--surface); box-shadow:inset 0 1px var(--material-rim),0 1px 2px #0002; display:inline-flex; gap:.5rem; align-items:center; justify-content:center; cursor:pointer; } button:hover:not(:disabled),select:hover:not(:disabled) { background:var(--selected); } button:active:not(:disabled) { background:var(--surface); box-shadow:inset 0 1px 2px var(--material-shade); } button:disabled { background:var(--surface); color:var(--muted); box-shadow:none; opacity:1; cursor:not-allowed; border-style:dashed; } .primary { background:var(--action); font-weight:600; } .primary:hover:not(:disabled) { background:var(--action-hover); } .primary:active:not(:disabled) { background:var(--action-pressed); } .primary:disabled { background:var(--surface); color:var(--muted); border-color:var(--border); } input:not([type=checkbox]),select { box-shadow:inset 0 1px 2px var(--material-shade); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } main:focus { outline:none; } svg { width:1.25rem; height:1.25rem; flex:none; fill:none; stroke:currentColor; } h1,h2,h3,p { margin:0 0 .75rem; } h1 { font-size:2rem; line-height:1.2; letter-spacing:-.04em; } h2 { font-size:1rem; } h3 { font-size:1.125rem; } .muted { color:var(--muted); } .small { font-size:.875rem; } .eyebrow { color:var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } .badge { border:1px solid var(--border); border-radius:1rem; padding:.2rem .6rem; font-size:.75rem; white-space:nowrap; } .masthead { padding:1rem 1.5rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; align-items:center; } .masthead>div { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; } .brand { font-weight:650; letter-spacing:-.03em; } .brand span { color:var(--muted); font-size:1.5rem; vertical-align:middle; margin-left:.5rem; }
.app-shell { display:grid; grid-template-columns:12rem minmax(0,1fr); max-width:112rem; margin:auto; } .navigation { padding:1.5rem 1rem; border-right:1px solid var(--border); } .navigation>a { display:flex; align-items:center; gap:.75rem; padding:.75rem; text-decoration:none; border-radius:.35rem; margin-bottom:.5rem; min-height:2.75rem; } .navigation a[aria-current] { background:var(--selected); border-left:3px solid var(--selection-indicator); font-weight:600; } .count { margin-left:auto; color:var(--muted); font-size:.75rem; } .navigation section { border-top:1px solid var(--border); margin-top:2rem; padding-top:1rem; font-size:.875rem; } .nav-note { color:var(--muted); font-size:.75rem; margin-top:4rem; }
main { padding:1.5rem; min-width:0; } .page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; } .panel { box-shadow:inset 0 1px var(--material-rim),var(--material-shadow); background:var(--surface); border:1px solid var(--border); border-radius:.5rem; padding:var(--pad); min-width:0; } .settings { margin-bottom:var(--gap); } .control-row,.button-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; } label { display:flex; flex-direction:column; gap:.35rem; font-size:.875rem; } .check-label { flex-direction:row; align-items:center; min-height:var(--control); } input[type=checkbox] { width:1.1rem; height:1.1rem; accent-color:var(--selection-indicator); } .settings .small { margin:.75rem 0 0; } .work-area { --inspector-width:300px; display:grid; grid-template-columns:minmax(0,1fr) 12px var(--inspector-width); gap:0; align-items:start; } .primary-work { display:grid; gap:var(--gap); min-width:0; } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; } .section-heading h2 { margin:0; }
table { border-collapse:collapse; width:100%; font-size:.875rem; } th { text-align:left; color:var(--muted); font-weight:500; } th,td { border-bottom:1px solid var(--border); padding:.6rem .5rem; vertical-align:middle; } td:first-child { width:68%; } tr.selected { background:var(--selected); } tr.selected td:first-child { box-shadow:inset 3px 0 var(--selection-indicator); } tr:not(.selected):hover { background:var(--raised); } .task-select { text-align:left; justify-content:flex-start; font-weight:600; background:transparent; border-color:transparent; padding:.25rem; min-height:var(--control); } .task-select,.task-select:hover:not(:disabled),.task-select:active:not(:disabled) { background:transparent; box-shadow:none; } .task-select[aria-pressed=true] { text-decoration:underline; text-decoration-color:var(--selection-indicator); text-underline-offset:.3rem; } .task-meta { display:block; color:var(--muted); margin:.25rem; font-size:.75rem; } .status { display:inline-block; font-size:.75rem; border:1px solid currentColor; border-radius:.25rem; padding:.15rem .4rem; } .info { color:var(--info); } .warning { color:var(--warning); } .success { color:var(--success); } .danger { color:var(--danger); } .progress-heading { display:flex; justify-content:space-between; gap:1rem; margin:1rem 0 .5rem; font-size:.875rem; } progress { display:block; width:100%; height:.75rem; accent-color:var(--progress); margin-bottom:1rem; } progress::-webkit-progress-bar { background:var(--raised); border:1px solid var(--border); border-radius:1rem; } progress::-webkit-progress-value { background:var(--progress); border-radius:1rem; }
#resize { cursor:col-resize; align-self:stretch; min-height:20rem; touch-action:none; position:relative; } #resize::after { content:''; position:absolute; width:2px; background:var(--border); top:.75rem; bottom:.75rem; left:5px; } #resize:hover::after { background:var(--fg); } #resize:focus-visible::after { background:var(--focus); } .inspector { font-size:.875rem; } .inspector h3 { overflow-wrap:anywhere; margin-top:1rem; } .inspector .eyebrow { margin-top:1rem; } dl { display:grid; grid-template-columns:1fr 1.4fr; gap:.75rem; border-block:1px solid var(--border); padding-block:1rem; } dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; } .note { display:flex; gap:.5rem; margin:1rem 0; color:var(--info); } .note p { margin:0; } #name-form { margin-top:1rem; } #workspace-name { width:100%; } input[aria-invalid=true] { border:2px solid var(--danger); } .error-text { color:var(--danger); font-size:.875rem; } #recovery-example { border-left:3px solid var(--border); padding:1rem; margin-top:1rem; } #recovery-example[data-state=error] { border-left-color:var(--danger); } #recovery-example[data-state=error] h3 { color:var(--danger); } #recovery-example[data-state=offline] { border-left-color:var(--warning); } #recovery-example[data-state=offline] h3 { color:var(--warning); } #feedback { color:var(--success); margin:1rem 0 0; } footer { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.75rem; color:var(--muted); margin-top:1.5rem; } footer a { margin-left:auto; } .work-area.collapsed { grid-template-columns:minmax(0,1fr); }
dialog { box-shadow:inset 0 1px var(--material-rim),var(--material-shadow); color:var(--fg); background:var(--surface); border:1px solid var(--border); border-radius:.5rem; padding:1.5rem; width:min(30rem,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; } dialog::backdrop { background:#0009; } #details-dialog { padding:0; margin-right:1rem; } #details-dialog .panel { border:0; } .skip { position:fixed; top:.5rem; left:1rem; padding:.5rem 1rem; background:var(--surface); z-index:5; transform:translateY(-200%); } .skip:focus { transform:none; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } :root[data-effects=true] .masthead { box-shadow:inset 0 2px var(--border); }
@media(max-width:1100px) { .app-shell { grid-template-columns:1fr; } .navigation { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.5rem 1rem; border-right:0; border-bottom:1px solid var(--border); } .navigation>a { margin:0; } .navigation>p,.navigation section,.count { display:none; } }
@media(max-width:900px) { .work-area { display:block; } #resize,#inspector-slot { display:none; } #resize-help { display:none; } #close-details { min-height:2.75rem; } }
@media(max-width:540px) { main { padding:1rem .75rem; } .masthead { padding:.75rem; flex-wrap:wrap; } .masthead .eyebrow { display:none; } .navigation { padding:.5rem; gap:0; } .navigation>a { padding:.6rem; font-size:.875rem; } .page-heading { flex-wrap:wrap; } h1 { font-size:1.75rem; } .control-row>label { width:100%; } select,button,input:not([type=checkbox]) { min-height:max(var(--control),2.75rem); } .task-select { min-height:max(var(--control),2.75rem); } th,td { padding:.5rem .25rem; } .button-row { align-items:stretch; } .button-row button { flex:1 1 auto; } #details-dialog { margin:auto; width:calc(100% - 1rem); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } button:active:not(:disabled) { transform:none; } }
@media(max-width:540px) { table { table-layout:fixed; } td:first-child,th:first-child { width:62%; } .task-select { width:100%; overflow-wrap:anywhere; } .status { overflow-wrap:anywhere; } }
@media(forced-colors:active) { .panel,button,input,select,dialog,.status { border-color:CanvasText; background-image:none; box-shadow:none; } .panel,dialog { background:Canvas; color:CanvasText; } button,button:hover:not(:disabled),button:active:not(:disabled),.primary:hover:not(:disabled),.primary:active:not(:disabled) { background:ButtonFace; color:ButtonText; box-shadow:none; border-color:ButtonText; } button:disabled,.primary:disabled { background:ButtonFace; color:GrayText; border-color:GrayText; box-shadow:none; } input,select { background:Canvas; color:CanvasText; } .task-select,.task-select:hover:not(:disabled),.task-select:active:not(:disabled) { background:transparent; border-color:transparent; } :focus-visible { outline-color:Highlight; } .primary { background:ButtonFace; color:ButtonText; border:2px solid ButtonText; } tr.selected td:first-child { border-left:3px solid Highlight; box-shadow:none; } .task-select[aria-pressed=true] { text-decoration-color:Highlight; } #resize::after { background:CanvasText; } .masthead { box-shadow:none !important; } }

/* Revision 4. Distinct controls retain spacing independently of density. */
button { white-space:normal; overflow-wrap:anywhere; min-width:0; }
.navigation>button { display:flex; width:100%; justify-content:flex-start; gap:.75rem; padding:.75rem; margin-bottom:8px; min-height:max(var(--control),44px); text-align:left; }
.navigation>a { margin-bottom:var(--control-gap); }
.page-heading { margin-bottom:var(--section-gap); }
.primary-work { gap:var(--section-gap); }
.control-row,.button-row { gap:var(--control-gap); }
.action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,max(9rem,calc((100% - var(--control-gap))/2))),1fr)); gap:var(--control-gap); align-items:stretch; }
/* At most two tracks keep the Pause/Cancel row full. Start owns its whole row. */
.action-grid>#start { grid-column:1/-1; }
.action-grid>button { width:100%; }
.action-grid>button>span { min-width:0; overflow-wrap:anywhere; }
.work-area { grid-template-columns:minmax(0,1fr) var(--divider-target,28px) var(--inspector-width); }
#resize::after { left:calc(50% - 1px); }
.work-area.collapsed { grid-template-columns:minmax(0,1fr); }
#name-form { display:grid; gap:8px; }
#name-form p { margin:0; }
#name-form button { justify-self:start; }
footer { column-gap:16px; row-gap:8px; }

#settings-slot { max-height:calc(100dvh - 32px); overflow:auto; }
.settings { margin:0; }
.settings .section-heading { gap:var(--group-gap); }
.settings .section-heading h2 { flex:1; }
.settings .button-row { align-items:stretch; }
.settings-sections { display:flex; flex-wrap:wrap; gap:var(--control-gap); margin-block:16px 24px; }
.settings-sections>button { flex:1 1 7rem; }
.settings-sections [aria-current=page] { border-bottom:3px solid var(--selection-indicator); font-weight:600; }
.settings-fields { display:grid; gap:var(--group-gap); }
.settings .check-label { gap:8px; padding-block:4px; }
.settings input[type=checkbox] { flex:none; margin:0; }
#width-form { display:grid; gap:8px; }
#width-form p { margin:0; }
#width-form .button-row { margin-top:8px; }
.settings-reset { margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.settings #storage-status { margin:24px 0 0; overflow-wrap:anywhere; }
.shortcuts { grid-template-columns:1fr; gap:8px; }
.shortcuts dd { margin-bottom:8px; }
#settings-dialog { position:fixed; inset-block:0; inset-inline:auto 0; margin:0; padding:0; width:min(30rem,100%); height:100dvh; max-width:100%; max-height:100dvh; border-radius:0; }
#settings-modal-slot { display:grid; min-height:100%; }
#settings-dialog .settings { border:0; }
@media(prefers-reduced-motion:no-preference) {
  #settings-dialog[open] { animation:settings-enter var(--motion-panel) ease-out; }
}
@keyframes settings-enter {
  from { transform:translateX(12px); }
  to { transform:translateX(0); }
}
@media(min-width:1640px) {
  .app-shell.settings-pinned { grid-template-columns:12rem minmax(0,1fr) 360px; }
  .settings-pinned #settings-slot { position:sticky; top:16px; width:auto; align-self:start; margin-block:24px; margin-right:16px; }
}
@media(max-width:1100px) {
  .navigation { gap:8px; }
  .navigation>a,.navigation>button { width:auto; margin:0; }
}
@media(max-width:900px) { .work-area { display:block; } }
@media(max-width:900px), (pointer:coarse) {
  button,select,input:not([type=checkbox]),.task-select,.check-label { min-height:max(var(--control),var(--touch-target)); min-width:var(--touch-target); }
}
@media(max-width:540px) {
  .navigation { gap:8px; }
  .navigation>button { padding:.6rem; font-size:.875rem; }
}

@media (pointer:coarse) {
  .work-area { --divider-target:var(--touch-target); }
}

.destructive {
  border-inline-start:3px solid var(--danger);
  font-weight:600;
}

@media (forced-colors:active) {
  .destructive { border-inline-start-color:ButtonText; }
}

@media (max-width:900px), (pointer:coarse) {
  footer a,.skip {
    display:inline-flex;
    align-items:center;
    min-inline-size:var(--touch-target);
    min-block-size:var(--touch-target);
  }
}

/* Revision 2. GitHub-scheme primary, structural edges, per-class density, and the grid signature. */
:root { --row:1.75rem; }
:root[data-density=compact] { --row:1.75rem; }
:root[data-density=comfortable] { --row:2.25rem; }
:root[data-density=touch] { --row:3rem; }
.panel,dialog,.masthead,.navigation,#recovery-example,dl,th,td,.navigation section { border-color:var(--edge); }
.navigation { border-right-color:var(--edge); } .masthead { border-bottom-color:var(--edge); }
.primary { background:var(--action); color:var(--action-foreground); border-color:var(--action); box-shadow:none; }
.primary:hover:not(:disabled) { background:var(--action-hover); border-color:var(--action-hover); }
.primary:active:not(:disabled) { background:var(--action-pressed); border-color:var(--action-pressed); }
.primary:disabled { background:var(--surface); color:var(--muted); border-color:var(--border); }
/* Data rows follow their own density class. */
td,th { padding-block:.25rem; } .task-select { min-height:var(--row); }
/* Active region rule: one per window, on the focused compartment header. */
.section-heading { padding-bottom:.5rem; border-bottom:2px solid transparent; }
.panel:focus-within>.section-heading { border-bottom-color:var(--selection-indicator); }
/* Grid motif: empty states and determinate progress only. */
#recovery-example[data-state=empty] { background-color:var(--surface); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:24px 24px; background-position:-1px -1px; }
progress { -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%); mask-image:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%); }
progress::-webkit-progress-bar { border-radius:0; } progress::-webkit-progress-value { border-radius:0; }
@media(forced-colors:active) { .primary { background:ButtonFace; color:ButtonText; border:2px solid ButtonText; } .panel:focus-within>.section-heading { border-bottom-color:Highlight; } #recovery-example[data-state=empty] { background-image:none; } progress { mask-image:none; -webkit-mask-image:none; } }