body.workflow-page{height:auto;min-height:100vh;overflow:auto}
.workbench{width:100%;max-width:1440px;margin:0 auto;padding:24px clamp(12px,3vw,36px) 48px;box-sizing:border-box}
.workbench h1{font-size:1.5rem;line-height:1.25;margin:0 0 8px;font-weight:650;letter-spacing:-.02em}
.workbench h2{font-size:1rem;margin:0 0 14px;font-weight:650}
.workbench p{line-height:1.6;max-width:75ch}
.work-status{color:var(--text-dim);font-size:.8125rem;line-height:1.6;min-height:1.6em;overflow-wrap:anywhere}
.work-status.error{color:var(--danger)}
.work-note{font-size:.8125rem;color:var(--text-dim);line-height:1.6;margin:12px 0}
@media(max-width:760px){
  .workbench{padding-top:18px}
  .workbench h1{font-size:1.375rem}
}
/* The start page. */
body.start-page .workbench{max-width:1000px;padding-bottom:16px}
.start-layout{display:block}
.start-tools{min-width:0}
.start-hero{text-align:center;padding:clamp(16px,5vh,44px) 0 8px}
.workbench .start-clock{max-width:none;font-family:var(--sans);font-size:clamp(3.5rem,12vw,7rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:0;font-weight:600}
.workbench .start-caption{max-width:none;display:flex;flex-direction:column;align-items:center;gap:2px;margin:12px 0 0;line-height:1.3}
.start-greeting{font-size:.9375rem;font-weight:500;color:var(--text)}
/* Both Hijri calendars, beside each other, because they routinely differ by a
   day and the point of showing them is the comparison. */
.start-dates{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 30px;margin:14px 0 0;padding:0}
.start-dates>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.start-dates dt{font-size:.75rem;font-weight:500;color:var(--text-dim);margin:0}
.start-dates dd{margin:0;font-size:.84375rem;font-weight:550;color:var(--text);font-variant-numeric:tabular-nums}
.start-date{font-size:.9375rem;font-weight:500;color:var(--text-dim);letter-spacing:.015em}
.start-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;max-width:860px;box-sizing:border-box;margin:26px auto 8px}
.start-search #q{flex:1 1 320px;min-height:52px;font-size:1.0625rem;padding-left:16px;padding-right:16px}
.start-search #search-go{min-width:132px!important;min-height:52px!important;padding:0 28px;font-size:1rem;font-weight:700}
.start-quick-links{position:relative;margin:0 0 38px;padding:0}
.start-quick-links-head{display:flex;align-items:center;justify-content:flex-end;min-height:16px;margin-bottom:4px;pointer-events:none}
.start-quick-edit{padding:3px 0;border:0;background:transparent;color:var(--text-dim);font-family:inherit;font-size:.75rem;font-weight:600;line-height:1.3;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;pointer-events:auto}
.start-quick-edit:hover,.start-quick-edit:focus-visible{color:var(--text);text-decoration-color:currentColor}
.start-quick-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.start-quick-link{height:36px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);color:var(--text);font-family:inherit;font-size:.75rem;font-weight:650;line-height:1.3;box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:5px 8px;text-decoration:none;min-width:0}
.start-quick-link>svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent)}
.start-quick-picture{width:18px;height:18px;flex:0 0 auto;border-radius:var(--radius);object-fit:cover}
.start-quick-link>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start-quick-link:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.start-quick-link.unset{border-style:dashed;color:var(--text-dim);background:transparent}
.start-quick-first{cursor:pointer;text-align:left}
.start-quick-first:hover,.start-quick-first:focus-visible{color:var(--text);border-color:var(--border-strong)}
.start-quick-editor{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-elev)}
.start-editor-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.workbench .start-editor-hint{margin:0;max-width:none;color:var(--text-dim);font-size:.75rem;line-height:1.45}
.start-editor-count{flex:0 0 auto;color:var(--text-dim);font-size:.6875rem;font-weight:650;font-variant-numeric:tabular-nums}
.start-quick-fields{display:grid;gap:5px}
.start-link-row{display:grid;grid-template-columns:18px 32px minmax(88px,.8fr) minmax(0,1.5fr) auto;align-items:center;gap:6px;padding:8px 10px;border:1px solid transparent;border-radius:var(--radius-lg)}
.start-link-row:hover,.start-link-row:focus-within{border-color:var(--border);background:var(--bg)}
.start-link-rank{color:var(--text-dim);font-size:.6875rem;font-variant-numeric:tabular-nums;text-align:right}
.start-link-icon{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);cursor:pointer}
.start-link-icon svg,.start-link-icon img{width:17px;height:17px;object-fit:cover;border-radius:var(--radius)}
.start-link-icon:hover,.start-link-icon:focus-visible,.start-link-icon[aria-expanded="true"]{border-color:var(--accent)}
.start-link-row .control{min-height:32px;height:32px;font-size:.8125rem}
.start-link-row .control[aria-invalid="true"]{border-color:var(--danger)}
.start-link-name{font-weight:650}
.start-link-row-actions{display:flex;align-items:center;gap:3px}
.start-link-btn{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-dim);cursor:pointer}
.start-link-btn svg{width:14px;height:14px}
.start-link-btn:hover:not(:disabled),.start-link-btn:focus-visible{color:var(--text);border-color:var(--border-strong)}
.start-link-btn:disabled{opacity:.28;cursor:default}
.start-link-remove:hover,.start-link-remove:focus-visible{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.start-editor-add{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.start-add-link-btn{display:inline-flex!important;align-items:center;gap:6px}
.start-add-link-btn svg{width:13px;height:13px;flex:0 0 auto}
.start-quick-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.start-quick-btn{min-height:28px!important;height:28px;padding:0 10px!important;border-radius:var(--radius)!important;font-size:.75rem!important}
.start-icon-picker{margin:2px 0 6px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);width:100%;max-width:100%;box-sizing:border-box}
.start-icon-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.start-icon-picker h3{margin:0;font-size:.75rem}
.start-icon-picker-head button{border:0;background:transparent;color:var(--text-dim);font-size:.6875rem;cursor:pointer}
.start-icon-picker-head button:hover,.start-icon-picker-head button:focus-visible{color:var(--text)}
.start-icon-upload{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);color:var(--text);font-size:.75rem;font-weight:650;cursor:pointer}
.start-icon-upload:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.start-icon-source{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--text-dim);font-size:.75rem}
.start-icon-source strong{color:var(--text);font-size:.75rem}
.start-picture-note{margin:0 0 8px;color:var(--text-dim);font-size:.75rem;line-height:1.45;white-space:nowrap}
.start-icon-grid{display:grid;grid-template-columns:repeat(auto-fit,44px);justify-content:center;gap:4px;margin-top:8px;max-width:100%;overflow:visible}
.start-icon-grid button{display:grid;place-items:center;justify-self:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);color:var(--accent);cursor:pointer}
.start-icon-grid button:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.start-icon-grid button.chosen{border-color:var(--accent);background:var(--accent-soft)}
.start-icon-grid svg{width:21px;height:21px}
.start-quick-editor .work-note{margin:8px 0 0}
.start-section{margin:0 0 32px}
#favorites-block{margin:0 auto 28px;width:100%;max-width:720px}
.start-section>h2{font-size:.9375rem;margin:0 0 12px}
.start-section .empty-state{margin-top:0;padding:22px 16px}
.start-catalog-find{display:flex;align-items:stretch;flex-wrap:wrap;gap:0 12px;margin:0 0 14px;border-bottom:1px solid var(--border)}
.start-catalog-search{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:7px;flex:0 1 210px;min-width:170px;padding:1px 2px 7px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:border-color .16s ease}
.start-catalog-search:hover,.start-catalog-search:focus-within{border-bottom-color:var(--accent)}
.start-catalog-search label{width:24px;height:26px;display:grid;place-items:center;color:var(--text-dim)}
.start-catalog-search:focus-within label{color:var(--accent)}
.start-catalog-search svg{width:15px;height:15px}
.start-catalog-search input{width:100%;min-width:0;height:28px;padding:0;border:0;border-radius:0;background:transparent;color:var(--text);font-size:.8125rem;outline:none;caret-color:var(--accent)}
.start-catalog-search input::placeholder{color:var(--text-dim)}
/* The global :focus-visible ring is 2px of var(--text) -- white in dark mode --
   and a text input matches :focus-visible on a plain mouse click, so clicking
   here drew a white box around the field. The wrapper's accent underline is
   already the focus signal (and it is the catalogue's too), so the ring is
   redundant rather than missing: cancel it on the input only. */
.start-catalog-search input:focus-visible{outline:none}
.start-category-tabs{position:relative;display:flex;align-items:stretch;gap:1px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.start-category-tabs::-webkit-scrollbar{display:none}
.start-catalog-find>.collapse-all{flex:0 0 auto;align-self:center;margin-left:auto}
.start-category-tabs>button[data-category]{border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:6px 8px;background:transparent;color:var(--text-dim);font-size:.75rem;font-weight:550;white-space:nowrap;cursor:pointer}
.start-category-tabs>button[data-category]:hover{color:var(--text)}
.start-category-tabs>button[data-category].active{color:var(--cc,var(--text));font-weight:650}
.start-category-indicator{position:absolute;left:0;bottom:-1px;width:var(--indicator-width,0);height:2px;background:var(--indicator-color,var(--text));transform:translateX(var(--indicator-x,0));pointer-events:none}
/* Centre the categories on the bar itself, not in the gap left over between the
   search box and Collapse all. Both of those come out of flow and the nav takes
   the full width with symmetric padding, so "All" sits on the bar's midline.
   The nav is position:relative and later in the DOM, so the search box needs a
   z-index or the nav's padding swallows clicks on it -- the same bug that made
   the catalogue's search box unclickable. */
@media(min-width:900px){
  .start-catalog-find{position:relative}
  .start-catalog-find>.start-catalog-search{position:absolute;left:0;bottom:0;width:210px;flex:none;z-index:1}
  .start-catalog-find>.collapse-all{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;z-index:1}
  .start-catalog-find>.start-category-tabs{flex:1 1 100%;justify-content:center;padding-inline:222px}
}
/* A compact version of the catalogue: same outlined category surfaces, with
   shorter rows and tighter rhythm for a page that already has a large clock. */
.start-tool-group{position:relative;margin:0 0 18px}
.start-cat-head{display:flex;align-items:center;gap:9px;width:100%;padding:0 2px 8px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left}
.start-cat-head .chev{width:12px;height:12px;flex:0 0 auto;color:var(--cc,var(--text-dim));transform:rotate(90deg);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.start-cat-head[aria-expanded="false"] .chev{transform:rotate(0deg)}
.start-cat-name{font-size:.78125rem;font-weight:700;letter-spacing:.02em;color:var(--text);transition:color .15s ease}
.start-cat-head:hover .start-cat-name{color:var(--cc,var(--accent))}
.start-cat-count{font-size:.8125rem;color:var(--text-dim);font-variant-numeric:tabular-nums}
.start-cat-head::after{display:none}
.start-tool-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.start-tool-cell{position:relative;border:1px solid color-mix(in srgb,var(--cc,var(--accent)) 14%,var(--border));border-radius:var(--radius-lg);background:var(--bg-elev)}
.start-tool{position:relative;display:flex;align-items:center;gap:10px;padding:8px 40px 8px 10px;border:0;border-radius:var(--radius);background:transparent;text-decoration:none;color:var(--text);min-height:46px}
.start-tool:hover{background:transparent}
.start-tool .tool-icon{width:28px;height:28px;border-radius:var(--radius)}
.start-tool .tool-icon svg{width:16px;height:16px}
.start-tool-name{font-size:.84375rem;font-weight:600;overflow-wrap:anywhere}
.start-tool-cell .pin-btn{top:50%;right:6px;transform:translateY(-50%);opacity:.45}
@media(max-width:760px){
  .start-tool-list{grid-template-columns:1fr}
  .start-catalog-search{flex:1 1 100%}
}
@media(max-width:800px){
  .start-quick-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  .start-quick-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .start-link-row{grid-template-columns:18px 32px minmax(0,1fr) auto;grid-template-areas:"rank icon name actions" "rank icon url url";row-gap:4px}
  .start-link-rank{grid-area:rank}
  .start-link-icon{grid-area:icon}
  .start-link-name{grid-area:name}
  .start-link-url{grid-area:url}
  .start-link-row-actions{grid-area:actions}
}
@media(max-width:520px){
  .start-search #search-go{width:100%}
  .start-editor-head{flex-direction:column;gap:4px}
  .start-link-row{padding:8px 6px}
  .start-picture-note{white-space:normal}
}
@media(prefers-reduced-motion:no-preference){
  .start-tool{transition:border-color .12s ease,background-color .12s ease}
  .start-category-indicator[data-ready="true"]{transition:transform .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1),background-color .26s ease}
  .start-tool-cell{transition:border-color .16s ease}
  .start-tool-cell:hover,.start-tool-cell:focus-within{border-color:color-mix(in srgb,var(--cc,var(--accent)) 45%,var(--border))}
}