/* The Data Center, in Account's right pane (site/datacenter/). Every color is a shell token (site/shell/devi-shell.css),
   so light and dark need nothing here. An 8-point spacing scale (4, 8, 12, 16, 24, 32), one type scale (11.5, 12.5,
   13.5, 15, 20, 26), tabular numbers in every count, and the same card, table and focus look throughout. */

/* the pane: full width for the Data Center, the Account sections keep their reading width */
.acct.shell .panels:has(> .dcpanel:not([hidden])){max-width:none}
.acct.shell .dcpanel{padding:0;margin:0;background:none;border:0;box-shadow:none}
/* Portal v3 (website preview 22): the portal's card and control radii, and its mono type for machine values. */
.dcpanel,.dc-palette,.dc-tip{--r:10px;--r-sm:6px;font-variant-numeric:tabular-nums}
.dcpanel .mono,.dc-palette .mono{font-family:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;font-size:.95em}
.dcpanel .num{text-align:right}
.dcpanel :focus-visible,.dc-palette :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.acct.shell .dcpanel a{color:var(--s1);text-decoration:none;-webkit-text-fill-color:currentColor;background-image:none}
.acct.shell .dcpanel a *{-webkit-text-fill-color:currentColor}
.acct.shell .dcpanel a:hover{text-decoration:underline}
.acct.shell .dcpanel .dc-link,.acct.shell .dcpanel .dc-link:hover{text-decoration:none;color:var(--text)}

/* status: always an icon and a word */
.dcpanel .status,.dc-palette .status{display:inline-flex;align-items:center;gap:6px;font:600 12px/1.4 var(--font);letter-spacing:normal;text-transform:none;margin:0;padding:2px 8px 2px 6px;border-radius:999px;white-space:nowrap}
.dcpanel .status svg{width:12px;height:12px;flex:none}
.st-good{background:var(--viz-full-bg);color:var(--viz-full-ink)}.st-warn{background:var(--viz-partial-bg);color:var(--viz-partial-ink)}
.st-serious{background:var(--viz-unsupported-bg);color:var(--viz-unsupported-ink)}.st-critical{background:var(--viz-bug-bg);color:var(--viz-bug-ink)}
.st-neutral{background:var(--bg);color:var(--text-2)}
.bg-good{background:var(--viz-cat-1)}.bg-warn{background:var(--viz-cat-2)}.bg-serious{background:var(--viz-cat-3)}.bg-critical{background:var(--viz-cat-4)}.bg-s1{background:var(--viz-cat-1)}
.seq-0{background:var(--viz-neutral)}.seq-1{background:var(--viz-seq-1)}.seq-2{background:var(--viz-seq-2)}.seq-3{background:var(--viz-seq-3)}.seq-4{background:var(--viz-seq-4)}.seq-5{background:var(--viz-seq-5)}
.sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.sw-good{background:var(--viz-cat-1)}.sw-warn{background:var(--viz-cat-2)}.sw-serious{background:var(--viz-cat-3)}.sw-critical{background:var(--viz-cat-4)}

/* the global filter bar */
.dcfilters{position:sticky;top:58px;z-index:4;margin:-22px -28px 16px;padding:12px 28px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.dc-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dc-fbar select,.dc-fbar input{height:32px;padding:0 10px;font:13px/1 var(--font);color:var(--text);background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-sm);max-width:180px}
.dc-fbar select:disabled{opacity:.5}
.dc-fbar .dc-extin{width:120px}
.dc-date{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
.dc-seg{display:inline-flex;background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:2px;gap:2px}
.dc-seg button{all:unset;box-sizing:border-box;height:26px;padding:0 10px;border-radius:6px;font:500 12.5px/26px var(--font);color:var(--text-2);cursor:pointer;white-space:nowrap}
.dc-seg button:hover{color:var(--text);background:var(--bg)}
.dc-seg button[aria-pressed="true"]{background:var(--s1);color:var(--on-s1)}
.dc-seg button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.dc-status button{padding:0 4px}.dc-status .status{background:none;padding:0 4px}
.dc-status button[aria-pressed="true"]{background:var(--s1-soft)}
.dc-status button[aria-pressed="true"] .status{color:var(--text)}
.dc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.dc-chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 6px 0 10px;border-radius:999px;background:var(--s1-soft);color:var(--text);font:500 12.5px/1 var(--font);cursor:pointer}
.dc-chip span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:13px;color:var(--text-2)}
.dc-chip:hover span{background:var(--raised);color:var(--text)}
.dc-chip:focus-visible,.dc-clear:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.dc-clear{all:unset;cursor:pointer;font:600 12.5px/1 var(--font);color:var(--s1);padding:4px}

/* the view */
.dcview{min-height:60vh}
.dc-view{display:flex;flex-direction:column;gap:16px}
.dc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.dc-h{margin:0;font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.01em;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:none;-webkit-text-fill-color:currentColor}
.dc-h:focus{outline:none}
.dc-lead{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:760px}
.dc-headx{display:flex;gap:8px}
.dc-sample{font-size:11.5px;font-weight:600;color:var(--state-near-ink);background:var(--state-near-bg);border-radius:999px;padding:2px 8px}
.dc-filtered{margin:0;font-size:12.5px;color:var(--text-2);background:var(--s1-soft);border-radius:var(--r-sm);padding:8px 12px}
.dc-note{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.dc-hint{font-size:12px;color:var(--muted)}

.dc-card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;min-width:0}
.dc-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.acct.shell .dcpanel .dc-ch h3{margin:0;font-size:13.5px;font-weight:600;color:var(--text)}
.dc-side{font-size:12px;color:var(--muted)}
.dc-grid{display:grid;gap:16px}
.dc-grid.c21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.dc-grid.c12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.dc-grid.c11{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

.dc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.dc-kpi{display:flex;flex-direction:column;gap:4px;padding:16px}
.dc-kl{font-size:12.5px;color:var(--text-2)}
.dc-kn{font-size:26px;font-weight:650;letter-spacing:-.02em;color:var(--text);line-height:1.15}
.dc-kd{font-size:12px;color:var(--muted)}.dc-kd.up{color:var(--viz-up)}.dc-kd.down{color:var(--viz-down)}
a.dc-kpi{transition:border-color .12s,transform .12s}
a.dc-kpi:hover{border-color:var(--s1)}
.dc-delta{font-size:12px;font-weight:600}.dc-delta.up{color:var(--viz-up)}.dc-delta.down{color:var(--viz-down)}.dc-delta.flat{color:var(--muted)}

/* bars */
.dc-bars{display:flex;flex-direction:column;gap:2px}
.dc-brow{display:grid;grid-template-columns:minmax(72px,30%) minmax(0,1fr) 64px;align-items:center;gap:12px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-sm)}
a.dc-brow:hover{background:var(--bg)}
a.dc-brow:hover .dc-bar{filter:brightness(1.1)}
.dc-bl{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-bt{height:10px;background:var(--grid);border-radius:999px;overflow:hidden}
.dc-bar{display:block;height:100%;border-radius:999px}
.dc-bar:not([class*="bg-"]){background:var(--viz-cat-1)}
.dc-bv{font-size:12.5px;font-weight:600;color:var(--text);text-align:right}
.dc-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-2);margin:0 0 12px}
.dc-stack{display:flex;height:16px;border-radius:6px;overflow:hidden;gap:2px;background:var(--grid)}
.dc-part{display:block;height:100%;min-width:3px;transition:filter .12s}
.dc-part:hover,.dc-part:focus-visible{filter:brightness(1.15)}
.dc-part:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}
.dc-stacks{display:flex;flex-direction:column;gap:12px}
.dc-stackrow{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px}
.dc-sl{font-size:12.5px;color:var(--text-2)}
/* return types: provider identity colors on marks only; text stays in ink; a dark outline keeps yellow readable */
.dc-returns{display:flex;flex-direction:column;gap:12px}
.dc-rrow{display:grid;grid-template-columns:minmax(120px,30%) minmax(0,1fr) 72px 92px;align-items:center;gap:6px 12px}
.dc-rname{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--text)}
.dc-rname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-rsw{flex:none;width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.6)}
.dc-rtrack{display:block;height:10px;background:var(--grid);border-radius:999px;overflow:hidden}
.dc-rtrack:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dc-rbar{display:block;height:100%;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.6)}
.dc-rnum,.dc-rfull{font-size:12.5px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dc-rfull{color:var(--text-2)}
.dc-rstack{grid-column:2 / -1}
.dc-rstack .dc-stack{height:8px}
@media (max-width:560px){
  .dc-rrow{grid-template-columns:minmax(0,1fr) auto auto}
  .dc-rname,.dc-rstack{grid-column:1 / -1}
}
.dc-sharelist{display:flex;flex-direction:column;margin-top:12px}
.dc-sharerow{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;margin:0 -8px;border-radius:var(--r-sm);font-size:13px}
.dc-sharerow:hover{background:var(--bg)}
.dc-meter{display:inline-block;width:72px;height:6px;border-radius:999px;background:var(--grid);overflow:hidden;vertical-align:middle}
.dc-meter i{display:block;height:100%;border-radius:999px}
.dc-pctcell{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}

/* trend */
.dc-trend{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px}
.dc-yaxis{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--muted);text-align:right;height:160px;padding:2px 0}
.dc-plot{position:relative;height:160px}
.dc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dc-svg .grid{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}
.dc-svg .area{fill:var(--viz-seq-3);opacity:.1}
.dc-svg .line{fill:none;stroke:var(--viz-seq-3);stroke-width:2;stroke-linejoin:round}
.dc-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--viz-seq-3);border:2px solid var(--raised);opacity:0;pointer-events:none;transition:left .06s,top .06s}
.dc-hits{position:absolute;inset:0;display:flex}
.dc-hit{flex:1;min-width:0;cursor:pointer}
.dc-hit:hover,.dc-hit:focus-visible{background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat}
.dc-hit:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dc-xaxis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}

.dc-pt{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--viz-seq-3);border:2px solid var(--raised);pointer-events:none}
.dc-xsteps span{flex:1 1 0;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-xsteps span:first-child{text-align:left}.dc-xsteps span:last-child{text-align:right}
.dc-cot{display:flex;flex-direction:column;gap:12px;min-width:0}
.dc-cotseg{align-self:flex-start}
.dc-cotpane[hidden]{display:none}
.dc-support-gaps .dc-brow{grid-template-columns:minmax(64px,24%) minmax(0,1fr) 84px}
@media (max-width:760px){.dc-cotpane .dc-hide-sm{display:none}}
/* tables */
.dc-table{display:flex;flex-direction:column;gap:8px;min-width:0}
.dc-ttools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dc-tsearch{height:32px;padding:0 10px;min-width:200px;font:13px/1 var(--font);color:var(--text);background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.dc-tcount{margin-left:auto;font-size:12px;color:var(--muted)}
.dc-scroll{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--raised)}
.dc-card .dc-scroll{border-radius:var(--r-sm)}
.dc-scroll table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.dc-scroll th{position:sticky;top:0;z-index:1;background:var(--surface);text-align:left;font-weight:600;font-size:12px;color:var(--text-2);padding:0;border-bottom:1px solid var(--line);white-space:nowrap}
.dc-scroll th:not(:has(button)){padding:8px 12px}
.dc-sort{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;cursor:pointer}
th.num .dc-sort{justify-content:flex-end}
.dc-sort:hover{color:var(--text)}
.dc-sort:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dc-arrow{font-size:9px;color:var(--muted)}
th[aria-sort] .dc-arrow{color:var(--s1)}
.dc-scroll td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.dc-scroll tr:last-child td{border-bottom:0}
.dc-rowlink{cursor:pointer}
.dc-rowlink:hover td{background:var(--bg)}
.dc-rowa{color:inherit!important;font-weight:500}
.dc-rowlink:hover .dc-rowa{color:var(--s1)!important}
.dc-chev{width:24px;color:var(--muted);text-align:right;font-size:16px}
.dc-rowlink:hover .dc-chev{color:var(--s1)}
.dc-emptyrow td{padding:0}
.dc-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12.5px;color:var(--muted)}
.dc-pager:empty{display:none}
.dc-more{display:flex;justify-content:center}
.dc-btn,.dc-btn2{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:var(--r-sm);font:600 13px/1 var(--font);cursor:pointer;text-decoration:none!important;white-space:nowrap}
.dc-btn{background:var(--s1);color:var(--on-s1)!important;border:1px solid var(--s1)}
.dc-btn2{background:var(--raised);color:var(--text);border:1px solid var(--line-2)}
.dc-btn2:hover{background:var(--bg)}
.dc-btn2:disabled{opacity:.5;cursor:default}
.dc-linkish{all:unset;cursor:pointer;color:var(--s1);font-weight:500}
.dc-linkish:hover{text-decoration:underline}

/* states */
.dc-state{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:24px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surface)}
.dc-state strong{font-size:13.5px;color:var(--text)}
.dc-state p{margin:0 0 4px;font-size:13px;color:var(--text-2)}
.dc-emptyrow .dc-state{border:0;border-radius:0}
.dc-state-error,.dc-state-offline{border-color:var(--viz-bug-bg)}
.skel{display:inline-block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--grid) 0%,var(--line) 50%,var(--grid) 100%);background-size:200% 100%;animation:dcshim 1.2s linear infinite}
.skel-big{height:24px;width:40%}.skel-block{display:block;height:140px;margin-top:12px;border-radius:8px}
@keyframes dcshim{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.dc-skel{display:flex;flex-direction:column;gap:12px}
.dc-skelrow{display:flex;gap:24px}
.dc-skelchart{min-height:200px}

/* tooltip */
.dc-tip{position:fixed;left:0;top:0;z-index:50;pointer-events:none;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:8px;box-shadow:var(--tipshadow);padding:8px 10px;font:12px/1.4 var(--font);opacity:0;transition:opacity .08s;white-space:nowrap}
.dc-tip b{display:block;font-size:12.5px;margin-bottom:2px}

/* Work on next */
/* To fix and Tickets: one plain line saying what to fix next, above each list. */
.dc-next{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--viz-cat-4);border-radius:var(--r-sm);background:var(--s1-soft);font-size:13.5px;line-height:1.5;color:var(--text-2);overflow-wrap:anywhere}
.dc-next strong{color:var(--text);font-weight:600}
.dc-tofix{display:grid;gap:16px;min-width:0}
.dc-worknext{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--viz-cat-4);border-radius:var(--r);padding:16px}
.dc-wnlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.dc-wn{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"rank ext" "rank st" "rank a" "rank b";column-gap:12px;row-gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color .12s}
.dc-wn:hover{border-color:var(--s1)}
.dc-wnrank{grid-area:rank;font-size:20px;font-weight:650;color:var(--muted);line-height:1}
.dc-wnext{grid-area:ext;font-size:15px;font-weight:650;color:var(--text)}
.dc-wn .status{grid-area:st;justify-self:start}
.dc-wnstat{font-size:12.5px;color:var(--text-2)}.dc-wnstat b{color:var(--text)}

/* feed and detail lists */
.dc-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dc-feed a{display:flex;align-items:center;gap:8px;padding:8px;margin:0 -8px;border-radius:var(--r-sm);font-size:13px;color:var(--text)}
.dc-feed a:hover{background:var(--bg)}
.dc-feed time{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.dc-dotc{width:8px;height:8px;border-radius:50%;flex:none}
.dc-dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0;font-size:13px}
.dc-dl dt{color:var(--text-2)}.dc-dl dd{margin:0;color:var(--text)}

/* breadcrumbs in the top bar, and the Jump to button */
.dc-crumbs{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px;font-size:12.5px}
.dc-crumbs li+li::before{content:"/";margin-right:4px;color:var(--muted)}
.dc-crumbs a{color:var(--muted);text-decoration:none}
.dc-crumbs a:hover{color:var(--text);text-decoration:underline}
.dc-crumbs [aria-current]{color:var(--text);font-weight:600}
.shell .iconbtn.dc-search{width:auto;padding:0 8px;display:inline-flex;gap:6px;align-items:center}
.shell .iconbtn.dc-search[hidden]{display:none}
.dc-search kbd{font:600 11px/1 var(--font);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 4px}

/* command palette */
.dc-palette{position:fixed;inset:0;z-index:60;background:rgba(10,10,11,.45);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.dc-pbox{width:100%;max-width:560px;background:var(--raised);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;font:14px/1.4 var(--font);color:var(--text)}
.dc-pinput{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);padding:16px;font:15px/1.4 var(--font);color:var(--text);background:var(--raised);outline:none}
.dc-plist{list-style:none;margin:0;padding:8px;max-height:50vh;overflow:auto}
.dc-plist li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:8px;cursor:pointer}
.dc-plist li.on{background:var(--s1-soft)}
.dc-plabel{font-weight:600}.dc-phintx{font-size:12px;color:var(--muted);text-align:right}
.dc-pnone{color:var(--muted);cursor:default}
.dc-phint{margin:0;padding:8px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}

/* Settings */
.dc-field{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;border:0;padding:0}
.dc-field>span,.dc-field legend{font-size:12.5px;color:var(--text-2);padding:0}
.dc-field input,.dc-field select{height:36px;padding:0 10px;font:14px/1 var(--font);color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.dc-field small{font-size:12px;color:var(--muted)}
.dc-checks{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--text)}
.dc-checks label{display:inline-flex;gap:6px;align-items:center}
.dc-formbar{display:flex;align-items:center;gap:12px;margin-top:16px}
.dc-msg{font-size:13px;color:var(--text-2)}.dc-msg.bad{color:var(--viz-bug-ink)}

/* the upload tool in the pane, and the bar of a section that opens a tool in a new tab */
.dc-embed{padding:0;overflow:hidden}
.dc-frame{display:block;width:100%;min-height:480px;border:0;background:var(--raised)}
.acct.shell .apbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.acct.shell .apbar p{margin:0}

/* To fix (the diagnostic report view), in the shell's tokens */
.lcpanel,.lcsheet{--t1:var(--text);--t2:var(--text-2);--t3:var(--muted);--hair2:var(--line);--lc-line:var(--line);--lc-box:var(--surface);font-size:13.5px}
:is(.lcpanel,.lcsheet) .lcstat b,:is(.lcpanel,.lcsheet) h3,:is(.lcpanel,.lcsheet) h4,:is(.lcpanel,.lcsheet) strong{color:var(--text)}
:is(.lcpanel,.lcsheet) table{table-layout:fixed}
:is(.lcpanel,.lcsheet) button{font:inherit;color:var(--text-2)}
:is(.lcpanel,.lcsheet) .lcdonut svg text{fill:var(--text)}
:is(.lcpanel,.lcsheet) .lcbar{background:var(--grid)}:is(.lcpanel,.lcsheet) .lcbar em{background:var(--text)}
:is(.lcpanel,.lcsheet) .lctable th{color:var(--muted);background:var(--bg);border-bottom-color:var(--line)}
:is(.lcpanel,.lcsheet) .lctable td{color:var(--text);border-color:var(--line)}

/* phone width: the section menu replaces the left panel (devi-shell.css); the pane stacks */
@media (max-width:1100px){.dc-grid.c21,.dc-grid.c12{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .dcfilters{top:0;margin:-16px -16px 16px;padding:8px 16px;position:static}
  .dc-fbar{gap:6px}
  .dc-fbar select,.dc-fbar input{max-width:none;flex:1 1 40%}
  .dc-seg{flex-wrap:wrap}
  .dc-grid.c11{grid-template-columns:minmax(0,1fr)}
  .dc-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dc-kn{font-size:20px}
  .dc-brow{grid-template-columns:minmax(64px,34%) minmax(0,1fr) 52px;gap:8px}
  .dc-scroll{max-height:none}
  .dc-scroll table{font-size:12.5px}
  .dc-scroll td,.dc-scroll th:not(:has(button)),.dc-sort{padding:8px}
  .dc-search kbd{display:none}
  .dc-tsearch{min-width:0;flex:1}
  .dc-wnlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-wn{grid-template-columns:1fr;grid-template-areas:"ext" "st" "a" "b";padding:8px}
  .dc-wnrank{display:none}
}
.acct.shell .dcpanel .dc-subh{margin:16px 0 8px;font-size:12.5px;font-weight:600;color:var(--text-2)}

/* File share: the upload tool's own list (site/admin/uploads/devi-uploads-list.js), in the shell's tokens */
.dc-uplist .ul-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dc-uplist .ul-tools label{font-size:12.5px;color:var(--text-2)}
.dc-uplist .ul-search{height:32px;border:1px solid var(--line-2);background:var(--raised);color:var(--text);border-radius:var(--r-sm);padding:0 10px;font:13px/1 var(--font);min-width:0;flex:1;max-width:320px}
.dc-uplist .ul-note{min-height:1.2em;margin:0 0 8px;font-size:12.5px;color:var(--text-2);overflow-wrap:anywhere}
.dc-uplist .ul-list{list-style:none;margin:0;padding:0}
.dc-uplist .ul-item{border-top:1px solid var(--line);padding:8px 0}
.dc-uplist .ul-item:first-child{border-top:0}
.dc-uplist .ul-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13px}
.dc-uplist .ul-open{all:unset;cursor:pointer;font-weight:600;color:var(--text);overflow-wrap:anywhere;flex:1 1 200px}
.dc-uplist .ul-open::before{content:"▸ ";color:var(--muted)}.dc-uplist .ul-open[aria-expanded="true"]::before{content:"▾ "}
.dc-uplist .ul-open:hover{color:var(--s1)}
.dc-uplist .ul-open:focus-visible,.dc-uplist .ul-action:focus-visible,.dc-uplist .ul-copy:focus-visible,.dc-uplist .ul-download:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dc-uplist .ul-date,.dc-uplist .ul-count,.dc-uplist .ul-total{color:var(--text-2);white-space:nowrap}
.dc-uplist .ul-state{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--text-2);white-space:nowrap}
.dc-uplist .ul-st-complete{background:var(--state-on-bg);color:var(--state-on-ink)}.dc-uplist .ul-st-uploading,.dc-uplist .ul-st-incomplete{background:var(--state-near-bg);color:var(--state-near-ink)}
.dc-uplist .ul-actions{display:inline-flex;gap:8px}
.dc-uplist .ul-action,.dc-uplist .ul-copy,.dc-uplist .ul-download{all:unset;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:4px 10px;font:600 12px/1.4 var(--font);color:var(--text);cursor:pointer;background:var(--raised)}
.dc-uplist .ul-download{background:var(--s1);border-color:var(--s1);color:var(--on-s1)}
.dc-uplist .ul-action[disabled],.dc-uplist .ul-copy[disabled],.dc-uplist .ul-download[disabled]{opacity:.55;cursor:default}
.dc-uplist .ul-files{list-style:none;margin:8px 0 0 16px;padding:0}
.dc-uplist .ul-file{border-top:1px dashed var(--line);padding:8px 0}
.dc-uplist .ul-filehead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px}
.dc-uplist .ul-path{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere;flex:1 1 180px;color:var(--text)}
.dc-uplist .ul-size{color:var(--text-2);white-space:nowrap}
.dc-uplist .ul-sha{display:inline-flex;align-items:center;gap:6px}
.dc-uplist .ul-sha code,.dc-uplist .ul-check code{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:12px;color:var(--text-2);overflow-wrap:anywhere;user-select:all;background:none}
.dc-uplist .ul-check{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:12px}
.dc-uplist .ul-label{color:var(--muted)}
.dc-uplist .ul-dim{color:var(--muted);font-size:12.5px;padding:4px 0}
.dc-uplist .ul-archived{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.dc-uplist .ul-archived summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2)}

/* Phone width: the first column stays put while a wide table scrolls sideways (owner's phone, Oct 22 2026). */
@media (max-width: 760px) {
  .dc-scroll th:first-child, .dc-scroll td:first-child { position: sticky; left: 0; z-index: 2; background: var(--raised); box-shadow: 1px 0 0 var(--line); }
  .dc-scroll th:first-child { z-index: 3; background: var(--surface); }
  .dc-arrow { font-family: system-ui, sans-serif; }
}
.dc-actions{display:inline-flex;gap:6px;flex-wrap:wrap}

/* Access requests (website preview 6): the filters on one line, and cells with one fact per line. */
.dc-filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 4px}
.dc-filterbar .dc-field{margin:0;min-width:170px}
.dc-lines{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-lines .dc-sub{font-size:12px;color:var(--muted)}
.dc-lines .dc-wrap{display:block;min-width:220px;max-width:320px;white-space:normal;overflow-wrap:break-word}
.dc-lines .dc-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* Accounts (website preview 25): the tabs, the row menu and the badges. Its dialog and menu surfaces read the portal's
   gradient, scrim and pop shadow, so they are in site/shell/devi-portal.css. */
.dc-accounts>.dc-tabs{align-self:flex-start;margin:4px 0 0}
.dc-tabs button[aria-selected="true"]{background:var(--s1);color:var(--on-s1)}
.dc-badges{display:inline-flex;flex-wrap:wrap;gap:4px}
.dc-rowact{width:44px;text-align:right}
.dc-menuwrap{display:inline-block}
.dc-kebab{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);
  border:1px solid transparent;font:700 16px/1 var(--font);color:var(--text-2);cursor:pointer}
.dc-kebab:hover,.dc-kebab[aria-expanded="true"]{background:var(--bg);border-color:var(--line-2)}
.dc-kebab:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.dc-btn.dc-danger{background:var(--critical-ink);border-color:var(--critical-ink);color:var(--on-s1)!important}
.dc-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 12px}
.dc-inline .dc-field{margin:0;min-width:220px;flex:1 1 220px}
.dc-inline .dc-formbar{margin:0}
.dc-text{font:14px/1.4 var(--font);color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:8px 10px;resize:vertical;min-height:64px}
.dc-accounts .dc-show-sm{display:none}
@media (max-width:760px){
  .dc-accounts .dc-hide-sm{display:none}
  .dc-accounts .dc-lines .dc-show-sm{display:block}
  .dc-accounts .dc-lines span{overflow-wrap:anywhere}
  .dc-accounts .dc-lines .dc-show-sm .dc-badges{margin-top:4px}
  .dc-inline .dc-field{min-width:0;flex-basis:100%}
}

/* Detail views on a phone (10/26/2026): the top bar shows only a back link to the list, on one line, never the
   device; the trail stays on a wider screen. A phone open's header is one column on the 8-point scale. */
.dcpanel,.pv2.shell{--dc-sp-1:4px;--dc-sp-2:8px;--dc-sp-3:12px;--dc-sp-4:16px}
.dc-crumbwrap{min-width:0;display:flex;align-items:center}
.dc-back{display:none}
.dc-dhead{align-items:flex-start}
.dc-dstack{display:flex;flex-direction:column;align-items:flex-start;gap:var(--dc-sp-3);min-width:0}
.dc-dstack>*{margin:0}
.dc-dmeta{color:var(--muted);font-size:13.5px;line-height:20px}
.dc-device{color:var(--text);font-size:15px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
.dc-model{color:var(--muted);font-weight:400}
.dc-pills{display:flex;flex-wrap:wrap;gap:var(--dc-sp-2);list-style:none;padding:0}
.dc-pills li{font-size:12.5px;line-height:18px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text-2)}
.dc-dnote{color:var(--muted);font-size:12.5px;line-height:18px}
@media (max-width:760px){
  .pv2.shell .crumb .dccrumbs{min-width:0;overflow:hidden;flex:1}
  .dc-crumbs.dc-hasback{display:none}
  .dc-back{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    padding:var(--dc-sp-2,8px) 0;color:var(--text);font-weight:600;font-size:14px;text-decoration:none}
  .dc-back:hover{text-decoration:underline}
}

/* Data Center colors (owner, 10/26/2026): DEVI's palette, no green, yellow or red. States carry an icon and a word,
   in brand tints of rising strength: On track, Near budget, Over budget. */
.dc-statechip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 8px 1px 6px;border-radius:999px;font:600 11.5px/1.5 var(--font);white-space:nowrap}
.dc-statechip svg{width:12px;height:12px;flex:none}
.dc-statechip.s-on{background:var(--state-on-bg);color:var(--state-on-ink)}
.dc-statechip.s-near{background:var(--state-near-bg);color:var(--state-near-ink)}
.dc-statechip.s-over{background:var(--state-over-bg);color:var(--state-over-ink)}
.dc-sub4{margin:16px 0 8px;font-size:13.5px;font-weight:650;color:var(--text)}
.dc-hitsat .dc-hit{position:absolute;top:0;bottom:0;flex:none}

/* AWS costs (owner, 10/26/2026): the state pill keeps its full width. One value column wide enough for the amount and
   the pill (the same in every row, so the bars line up), the bar gives way, and on a narrower screen the pill goes
   under the amount; nothing clips it. */
.dc-costs .dc-brow{grid-template-columns:72px minmax(40px,1fr) 232px;margin:0;padding:6px 4px}
.dc-costs .dc-bv.dc-bvs{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 6px;min-width:0;overflow:visible}
.dc-costs .dc-bvt{white-space:nowrap}
.dc-costs .dc-statechip{flex:none;margin-left:0}
@media (max-width:1180px){.dc-costs .dc-brow{grid-template-columns:72px minmax(40px,1fr) 128px}.dc-costs .dc-bv.dc-bvs{flex-direction:column;align-items:flex-end}}
/* DEVI AI (website preview 31; owner 10/26/2026: "like Open WebUI but light"): a full-screen chat workspace inside
   the Data Center, in the Data Center's own shell tokens (light by default; it follows the theme switch). */
.dc-aiws{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--raised);color:var(--text);
  font:400 14px/1.5 var(--font);
  /* A phone's notch and home bar: the page is viewport-fit=cover, and it also runs as a home-screen app. */
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.dc-aiws svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-aiws button,.dc-aiws a{font:inherit}
.dc-aiws :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dc-aitop{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--raised)}
.dc-aiback{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:8px;color:var(--text-2);text-decoration:none;font-weight:500}
.dc-aiback:hover{background:var(--surface);color:var(--text)}
.dc-aimenu{all:unset;display:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--text-2)}
.dc-ainame{margin:0;font-size:16px;font-weight:650;color:var(--text)}
.dc-aispendbox{margin-left:auto}
.dc-aispend{display:grid;grid-template-columns:auto 120px auto;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.dc-aispend .dc-meter{width:120px}
.dc-aispend-v{font-weight:600;color:var(--text)}
.dc-ainew{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--text);font-weight:600;cursor:pointer}
.dc-ainew:hover{background:var(--surface)}
.dc-ainew-top{display:none}
.dc-aibody{flex:1;display:flex;min-height:0;position:relative}
.dc-aiside{flex:none;width:272px;display:flex;flex-direction:column;gap:8px;padding:12px;border-right:1px solid var(--line);background:var(--surface);overflow:auto}
.dc-aiside .dc-ainew{width:100%;justify-content:flex-start}
.dc-aiside-h{margin:8px 4px 0;font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dc-aiside-empty{margin:4px;font-size:13px;color:var(--muted)}
.dc-aiside-note{margin:auto 4px 0;padding-top:12px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.dc-aichats{display:flex;flex-direction:column;gap:2px}
.dc-aichat{display:flex;align-items:center;border-radius:8px}
.dc-aichat:hover,.dc-aichat.on{background:var(--grid)}
.dc-aichat.on{box-shadow:inset 3px 0 0 var(--s1)}
.dc-aichat-open{all:unset;flex:1;min-width:0;display:flex;flex-direction:column;padding:7px 8px 7px 10px;cursor:pointer}
.dc-aichat-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;color:var(--text)}
.dc-aichat-d{font-size:11.5px;color:var(--muted)}
.dc-aichat-del{all:unset;flex:none;padding:6px;margin-right:4px;border-radius:6px;color:var(--muted);cursor:pointer;opacity:0}
.dc-aichat:hover .dc-aichat-del,.dc-aichat.on .dc-aichat-del,.dc-aichat-del:focus-visible{opacity:1}
.dc-aichat-del:hover{color:var(--state-over-ink);background:var(--state-over-bg)}
.dc-aiconfirm{margin:2px 0 6px;padding:10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}
.dc-aiconfirm p{margin:0 0 8px;font-size:12.5px;color:var(--text)}
.dc-aiconfirm div{display:flex;gap:8px}
.dc-aimain{flex:1;min-width:0;display:flex;flex-direction:column}
.dc-aithread{flex:1;overflow:auto;padding:24px max(16px,calc((100% - 820px) / 2)) 8px}
.dc-aiempty{max-width:640px;margin:8vh auto 0;text-align:center}
.dc-aiempty-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--s1-soft);color:var(--s1)}
.dc-aiempty-mark svg{width:26px;height:26px}
.dc-aiempty-h{margin:14px 0 6px;font-size:22px;font-weight:650;color:var(--text)}
.dc-aiempty p{margin:0 auto;max-width:520px;color:var(--text-2)}
.dc-aiprompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px;text-align:left}
.dc-aiprompt{all:unset;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--text);font-size:13.5px;line-height:1.4;cursor:pointer}
.dc-aiprompt:hover{border-color:var(--line-2);background:var(--surface)}
.dc-aimsg{display:flex;gap:10px;margin:0 0 18px}
.dc-aimsg-me{justify-content:flex-end}
.dc-aimsg-me .dc-aibubble{max-width:min(78%,620px);padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--s1-soft);color:var(--text)}
.dc-aimsg-ai .dc-aibubble{flex:1;min-width:0;max-width:760px;padding:2px 0;color:var(--text)}
.dc-aiavatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--s1-soft);color:var(--s1)}
.dc-aiavatar svg{width:17px;height:17px}
.dc-aino .dc-aimd{color:var(--text-2)}
.dc-aimd p{margin:0 0 8px}
.dc-aimd ul,.dc-aimd ol{margin:0 0 8px;padding-left:22px}
.dc-aimd li{margin:2px 0}
.dc-aimd h4,.dc-aimd h5,.dc-aimd h6{margin:10px 0 6px;font-size:14.5px;font-weight:650}
.dc-aimd code{padding:1px 5px;border-radius:5px;background:var(--bg);font:500 12.5px/1.4 ui-monospace,monospace}
.dc-aimdtable{overflow-x:auto;margin:6px 0 10px}
.dc-aimdtable table{border-collapse:collapse;font-size:13px;min-width:260px}
.dc-aimdtable th,.dc-aimdtable td{padding:6px 10px;border:1px solid var(--line);text-align:left}
.dc-aimdtable th{background:var(--surface);font-weight:600}
.dc-aichart{margin:10px 0 4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.dc-aichart h4{margin:0 0 8px;font-size:13px;font-weight:600}
.dc-aisources{margin-top:8px;font-size:12.5px;color:var(--text-2)}
.dc-aisources summary{cursor:pointer;width:max-content;color:var(--muted)}
.dc-aisrc{list-style:none;margin:6px 0 0;padding:0}
.dc-aisrc li{display:flex;gap:8px;align-items:baseline;padding:2px 0}
.dc-aisrc-none{margin:6px 0 0}
.dc-aicite{flex:none;min-width:22px;padding:1px 5px;border-radius:4px;background:var(--surface);border:1px solid var(--line);font:600 11px/1.4 var(--font);text-align:center}
.dc-aimeta{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.dc-aidots{display:inline-flex;gap:3px;vertical-align:middle}
.dc-aidots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dc-aidot 1.2s infinite ease-in-out}
.dc-aidots i:nth-child(2){animation-delay:.15s}.dc-aidots i:nth-child(3){animation-delay:.3s}
@keyframes dc-aidot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dc-aidots i{animation:none}}
.dc-aicompose{flex:none;padding:8px max(16px,calc((100% - 820px) / 2)) 16px}
.dc-aicompose-in{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 14px;border:1px solid var(--line-2);border-radius:16px;background:var(--raised);box-shadow:0 2px 10px rgba(16,24,40,.06)}
.dc-aicompose-in:focus-within{border-color:var(--s1)}
.dc-aibox{flex:1;box-sizing:border-box;min-height:24px;max-height:180px;resize:none;padding:6px 0;border:0;outline:0;background:transparent;color:var(--text);font:400 14.5px/1.5 var(--font)}
.dc-aibox:focus-visible{outline:0}
.dc-aisend{all:unset;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--s1);color:var(--on-s1);cursor:pointer}
.dc-aisend:disabled{opacity:.4;cursor:not-allowed}
.dc-aibox:disabled{opacity:.5}
.dc-aicompose-bar{display:flex;align-items:center;gap:12px;padding:8px 6px 0;font-size:12.5px;color:var(--muted)}
.dc-aitoggle{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:500;cursor:pointer}
.dc-aitoggle-in{position:absolute;opacity:0;width:1px;height:1px}
.dc-aitoggle-ui{position:relative;width:30px;height:18px;border-radius:999px;background:var(--line-2);transition:background .15s}
.dc-aitoggle-ui::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--raised);transition:transform .15s}
.dc-aitoggle-in:checked+.dc-aitoggle-ui{background:var(--s1)}
.dc-aitoggle-in:checked+.dc-aitoggle-ui::after{transform:translateX(12px)}
.dc-aitoggle-in:focus-visible+.dc-aitoggle-ui{outline:2px solid var(--focus);outline-offset:2px}
.dc-aicount{margin-left:auto;font-variant-numeric:tabular-nums}
.dc-aimsgline{margin:6px 6px 0;font-size:13px;color:var(--text-2)}.dc-aimsgline:empty{display:none}
.dc-aimsgline.bad{color:var(--state-over-ink)}
.dc-aiscrim{display:none}
@media (max-width:820px){
  .dc-aimenu{display:inline-grid}
  .dc-aiback span{display:none}
  .dc-aispend{grid-template-columns:auto;gap:2px;text-align:right}
  .dc-aispend .dc-meter,.dc-aispend-n{display:none}
  .dc-ainew-top{display:inline-flex;padding:8px}
  .dc-ainew-top span{display:none}
  .dc-aiside{position:absolute;z-index:2;top:0;bottom:0;left:0;width:min(84%,300px);transform:translateX(-102%);transition:transform .2s;box-shadow:4px 0 20px rgba(16,24,40,.12)}
  .dc-aidrawer .dc-aiside{transform:none}
  .dc-aidrawer .dc-aiscrim{display:block;position:absolute;z-index:1;inset:0;background:rgba(16,24,40,.25)}
  .dc-aichat-del{opacity:1}
  .dc-aiprompts{grid-template-columns:1fr}
  .dc-aithread{padding:16px 12px 8px}
  .dc-aicompose{padding:8px 12px 12px}
  .dc-aimsg-me .dc-aibubble{max-width:86%}
}
/* The Overview's Costs card line. */
.dc-aicost{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.dc-aicost-l{font-weight:600;color:var(--text)}
.dc-aicost-v{font-variant-numeric:tabular-nums;text-align:right}
.dc-aicost .dc-meter{grid-column:1/-1;grid-row:2;width:100%}
/* ── Library (website preview 40, phase 1): learning and reference documents, read-only reading view ── */
.lib .lib-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lib .lib-i.lib-mini { width: 13px; height: 13px; color: var(--muted); margin-left: auto; }
.lib .lib-i.big { width: 34px; height: 34px; }
.lib button { font: inherit; }
.lib .dc-btn2, .lib .dc-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lib-ib { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.lib-ib:hover, .lib-ib:focus-visible { background: var(--bg); border-color: var(--line); }
.lib-ib.sm { width: 26px; height: 26px; }
.lib-ib.on { color: var(--viz-seq-4); }
.lib-lnk { border: 0; background: none; color: var(--s1); padding: 2px 4px; cursor: pointer; font-size: 13px; }
.lib-lnk.bad, .lib-menu .bad { color: var(--viz-bug-ink); }
.lib-lnk:disabled { color: var(--muted); cursor: default; }
.lib-live { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; margin: 0;
  background: var(--text); color: var(--raised); padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); transition: .2s; max-width: calc(100vw - 32px); }
.lib-live.on { opacity: 1; transform: translate(-50%, 0); }
.lib-live.bad { background: var(--state-over-bg); color: var(--state-over-ink); }
.lib-n1 { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-n2 { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.lib-nt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lib-small { color: var(--text-2); font-size: 14px; margin: 0 0 12px; }
.lib-note { background: var(--viz-unsupported-bg); border: 1px solid var(--line); color: var(--viz-unsupported-ink); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin: 0 0 12px; }
.lib-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.lib-chip.ok { background: var(--state-on-bg); color: var(--state-on-ink); }
.lib-chip.off { background: var(--bg); color: var(--text-2); }
.lib-chip.warn { background: var(--state-near-bg); color: var(--state-near-ink); }
.lib-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.lib-tag { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.lib-star { color: var(--viz-seq-4); fill: var(--state-near-bg) !important; width: 15px !important; height: 15px !important; }

/* layout */
.lib-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.lib-sidebox > summary { display: none; }
.lib-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.lib-tree { display: flex; flex-direction: column; gap: 1px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.lib-tree hr { border: 0; border-top: 1px solid var(--line); margin: 6px 2px; }
.lib-tl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.lib-tr { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14px; min-width: 0; }
.lib-tr:hover { background: var(--bg); }
.lib-tr.on { background: var(--viz-track); color: var(--viz-full-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.lib-trn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-over { outline: 2px dashed var(--viz-cat-3); outline-offset: -2px; background: var(--viz-unsupported-bg) !important; }
.lib-use { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.lib-useh { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--text-2); }
.lib-bar { display: flex; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.lib-bar i, .lib-key i { display: block; height: 100%; }
.lib .u1 { background: var(--brand); } .lib .u2 { background: var(--viz-cat-3); } .lib .u3 { background: var(--viz-neutral); }
.lib-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.lib-key li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; color: var(--text-2); }
.lib-key i { width: 10px; height: 10px; border-radius: 3px; }
.lib-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lib-bar1 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lib-sbox { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--muted); min-width: 0; }
.lib-sbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(75,141,248,.15); }
.lib-search { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 9px 0; font: inherit; color: var(--text); }
.lib-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lib-sec { display: flex; flex-direction: column; gap: 8px; }
.lib-sh { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0; }
.lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.lib-card { display: flex; gap: 10px; align-items: center; padding: 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; min-width: 0; }
.lib-card:hover, .lib-card2:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.lib-card2 { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }

/* lists */
.lib-list { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; }
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) 92px 36px; gap: 12px; align-items: center; padding: 8px 10px 8px 12px; border-top: 1px solid var(--line); }
.lib-row:first-child { border-top: 0; }
.lib-row:not(.lib-rh):hover { background: var(--surface); }
.lib-rh { font-size: 12px; color: var(--muted); font-weight: 600; padding-top: 10px; padding-bottom: 6px; }
.lib-row.held .lib-n1 { color: var(--state-near-ink); }
.lib-name { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.lib-meta { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 0; flex-wrap: wrap; }
.lib-when { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.lib-fic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--viz-track); color: var(--viz-full-ink); flex: none; }
.lib-fic.big { width: 52px; height: 52px; border-radius: 14px; }
.lib-fic.big .lib-i { width: 26px; height: 26px; }
:is(.lib, .lib-scrim) .c-blue { background: var(--viz-track); color: var(--viz-full-ink); }
:is(.lib, .lib-scrim) .c-sky { background: var(--viz-partial-bg); color: var(--viz-partial-ink); }
:is(.lib, .lib-scrim) .c-violet { background: var(--viz-unsupported-bg); color: var(--viz-unsupported-ink); }
:is(.lib, .lib-scrim) .c-plum { background: var(--viz-bug-bg); color: var(--viz-bug-ink); }
:is(.lib, .lib-scrim) .c-indigo { background: var(--state-near-bg); color: var(--state-near-ink); }
:is(.lib, .lib-scrim) .c-slate { background: var(--bg); color: var(--text-2); }
.lib-tr .lib-i { background: none !important; }
:is(.lib, .lib-scrim) .t-pdf { background: var(--viz-bug-bg); color: var(--viz-bug-ink); }
:is(.lib, .lib-scrim) .t-docx, :is(.lib, .lib-scrim) .t-pptx { background: var(--viz-track); color: var(--viz-full-ink); }
:is(.lib, .lib-scrim) .t-md, :is(.lib, .lib-scrim) .t-txt { background: var(--bg); color: var(--text-2); }
:is(.lib, .lib-scrim) .t-csv, :is(.lib, .lib-scrim) .t-xlsx { background: var(--viz-partial-bg); color: var(--viz-partial-ink); }
.lib-row.held .lib-fic { background: var(--state-near-bg); color: var(--state-near-ink); }
.lib-mw { position: relative; justify-self: end; }
.lib-menu { position: absolute; right: 0; top: 38px; z-index: 30; min-width: 196px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,30,50,.16); padding: 6px; display: flex; flex-direction: column; }
.lib-menu[hidden] { display: none; }
.lib-menu button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 14px; }
.lib-menu button:hover { background: var(--bg); }
.lib-menu button:disabled { color: var(--muted); cursor: default; background: none; }
.lib-drop { display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 14px; background: rgba(255,255,255,.5); }
.lib-fhead { display: flex; gap: 14px; align-items: flex-start; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 16px; position: relative; overflow: hidden; }
.lib-fhead::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--viz-seq-4) 55%, var(--viz-cat-2))); }
.lib-fhead > .lib-nt { flex: 1; gap: 4px; }
.lib-fh { margin: 0; font-size: 18px; }
.lib-fhead p { margin: 0; }
.lib-fact { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lib-crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.lib-crumbs a { color: var(--s1); text-decoration: none; }
.lib-queue { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.lib-qh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lib-qh .lib-n2 { flex: 1; }
.lib-qr { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto); gap: 10px; align-items: center; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); }
.lib-qn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-qs { color: var(--muted); font-size: 13px; text-align: right; }
.lib-qs.good { color: var(--state-on-ink); } .lib-qs.bad { color: var(--viz-bug-ink); } .lib-qs.warn { color: var(--state-near-ink); }
.lib-acts { list-style: none; margin: 0; padding: 0; }
.lib-acts li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.lib-acts li:first-child { border-top: 0; }
.lib-aw { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.lib-role { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lib-aa { overflow-wrap: anywhere; }
.lib-at { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lib-people { list-style: none; margin: 0 0 16px; padding: 0; }
.lib-people li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.lib-people li:first-child { border-top: 0; }
.lib-people .lib-nt { flex: 1; }
.lib-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--viz-seq-4) 55%, var(--viz-cat-2))); color: var(--on-s1); font-weight: 700; font-size: 13px; flex: none; }
.lib-av.sm { width: 26px; height: 26px; font-size: 11px; }
.lib-inv { border-top: 1px solid var(--line); padding-top: 14px; }
.lib-invr { display: flex; gap: 8px; margin: 6px 0; }
.lib-invr select { max-width: 280px; }

/* dialogs */
.lib-scrim { position: fixed; inset: 0; background: rgba(20,28,45,.35); z-index: 50; display: grid; place-items: center; padding: 16px; }
.lib-modal { background: var(--raised); border-radius: 14px; box-shadow: 0 24px 60px rgba(20,30,50,.25); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; font-family: var(--font); color: var(--text); }
.lib-mh { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 6px 20px; }
.lib-mh h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.lib-mb { padding: 6px 20px 12px; overflow: auto; }
.lib-mb p { margin: 0 0 10px; }
.lib-mf { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.lib-scrim .lib-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lib-scrim .dc-btn2, .lib-scrim .dc-btn { display: inline-flex; align-items: center; gap: 6px; }
.lib-lab { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin: 12px 0 6px; }
.lib-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font: inherit; color: var(--text); background: var(--raised); }
.lib-in:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(75,141,248,.15); }
textarea.lib-in { resize: vertical; }
.lib-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-swb, .lib-icb { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; background: var(--bg); }
.lib-swb::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: currentColor; }
.lib-swb[aria-checked="true"], .lib-icb[aria-checked="true"] { border-color: var(--brand); }
.lib-pre { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; overflow: auto; max-height: 220px; white-space: pre; }
.lib-hash { overflow-wrap: anywhere; font-size: 12.5px; margin: 0; }
.lib-copy { display: flex; gap: 8px; align-items: center; }
.lib-dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.lib-dl dt { color: var(--muted); } .lib-dl dd { margin: 0; overflow-wrap: anywhere; }
.lib-vers { list-style: none; margin: 0; padding: 0; }
.lib-vers li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }

/* reading view */
.lib-doc { max-width: none; }
.lib-reader { display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: calc(100vh - 150px); min-height: 520px; }
.lib-tools { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--raised); }
.lib-tt { flex: 1 1 220px; display: flex; flex-direction: column; min-width: 0; }
.lib-tt .lib-n2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-tg { display: flex; align-items: center; gap: 4px; }
.lib-pg { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.lib-pin { width: 38px; text-align: center; border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 2px; font-size: 13px; }
.lib-zv { min-width: 42px; text-align: center; font-size: 12.5px; color: var(--text-2); }
.lib-fbox { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 0 4px 0 9px; color: var(--muted); background: var(--bg); }
.lib-fbox:focus-within { border-color: var(--brand); background: var(--raised); }
input.lib-find { min-width: 0; width: 140px; border: 0; background: none; outline: 0; font: inherit; font-size: 14px; padding: 6px 0; color: var(--text); }
.lib-fn { font-size: 12px; min-width: 44px; }
.lib-nb[aria-pressed], .lib-reader.notes-on .lib-nb { background: var(--viz-track); border-color: var(--s1-soft); color: var(--viz-full-ink); }
.lib-rbody { flex: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 0; }
.lib-reader.notes-on .lib-rbody { grid-template-columns: 150px minmax(0, 1fr) 320px; }
.lib-reader.compact .lib-rbody { grid-template-columns: minmax(0, 1fr); }
.lib-reader.compact.notes-on .lib-rbody { grid-template-columns: minmax(0, 1fr) 260px; }
.lib-reader .lib-notes { display: none; }
.lib-reader.notes-on .lib-notes { display: flex; }
.lib-rail { overflow: auto; border-right: 1px solid var(--line); padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lib-seg { display: inline-flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.lib-sb { flex: 1; border: 0; background: none; padding: 5px 10px; border-radius: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.lib-sb[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.lib-thumb { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.lib-tp { width: 92px; height: 119px; background: var(--raised); border: 1px solid var(--line-2); border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 10px 9px; display: flex; flex-direction: column; gap: 5px; box-sizing: border-box; }
.lib-thumb:hover .lib-tp { border-color: var(--brand); }
.lib-tp i { display: block; height: 4px; border-radius: 2px; background: var(--line-2); }
.lib-tp i.t-h1 { height: 7px; width: 70%; background: var(--viz-neutral); } .lib-tp i.t-h2 { width: 55%; background: var(--viz-seq-1); }
.lib-tp i.t-li, .lib-tp i.t-ol { width: 85%; margin-left: 8%; } .lib-tp i.t-table { height: 22px; background: repeating-linear-gradient(var(--line-2) 0 4px, transparent 4px 7px); }
.lib-outline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lib-outline button { border: 0; background: none; text-align: left; padding: 5px 4px; color: var(--text-2); cursor: pointer; width: 100%; border-radius: 5px; }
.lib-outline button:hover { background: var(--raised); color: var(--s1); }
.lib-outline .h2 button { padding-left: 14px; font-size: 12.5px; }
.lib-stage { position: relative; min-width: 0; min-height: 0; display: flex; }
.lib-canvas { flex: 1; font-size: 15.5px; overflow: auto; background: var(--bg); padding: 24px 20px 60px; outline: 0; }
.lib-page { position: relative; box-sizing: border-box; width: min(100%, 52.6em); margin: 0 auto 22px; background: var(--raised); border-radius: 2px;
  box-shadow: 0 1px 3px rgba(20,30,50,.12), 0 6px 18px rgba(20,30,50,.06); padding: 4.1em 4.6em 3.6em;
  line-height: 1.62; color: var(--text); min-height: 36em; }
.lib-page h1 { font-size: 1.75em; line-height: 1.25; margin: 0 0 .6em; letter-spacing: -.01em; }
.lib-page h2 { font-size: 1.2em; margin: 1.3em 0 .45em; }
.lib-page p { margin: 0 0 .75em; }
.lib-page li { margin: 0 0 .35em 1.3em; list-style: disc; display: list-item; }
.lib-page li.lib-ol { list-style: none; position: relative; }
.lib-page li.lib-ol::before { content: attr(data-n); position: absolute; left: -1.4em; color: var(--muted); }
.lib-tw { overflow-x: auto; margin: .4em 0 1em; }
.lib-tb { border-collapse: collapse; font-size: .9em; width: 100%; }
.lib-tb th, .lib-tb td { border: 1px solid var(--line-2); padding: .4em .6em; text-align: left; vertical-align: top; }
.lib-tb th { background: var(--surface); font-weight: 600; }
.lib-pno { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.lib-bw { position: relative; border-radius: 4px; margin: 0 -8px; padding: 0 8px; transition: background .3s; }
.lib-bw:hover { background: var(--surface); }
.lib-bw.lib-flash { background: var(--viz-track); }
.lib-plus { position: absolute; right: -2.7em; top: 2px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 11px; padding: 0; }
.lib-plus .lib-i { width: 14px; height: 14px; }
.lib-bw:hover .lib-plus, .lib-plus:focus-visible, .lib-plus.has { opacity: 1; }
.lib-plus.has { background: var(--viz-unsupported-bg); border-color: var(--state-near-bg); color: var(--viz-unsupported-ink); font-weight: 700; }
mark.lib-hl { background: var(--viz-unsupported-bg); color: inherit; border-bottom: 2px solid var(--viz-cat-3); cursor: pointer; border-radius: 2px; }
mark.lib-hl.done { background: var(--bg); border-bottom-color: var(--line-2); }
mark.lib-find { background: var(--s1-soft); color: inherit; border-radius: 2px; }
mark.lib-find.cur { background: var(--viz-seq-4); color: var(--on-s1); }
.lib-addnote { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 99px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--viz-seq-4) 55%, var(--viz-cat-2))); color: var(--on-s1); font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 6px 18px rgba(75,141,248,.35); }
.lib-addnote .lib-i { width: 15px; height: 15px; }
.lib-notes { flex-direction: column; gap: 10px; overflow: auto; border-left: 1px solid var(--line); padding: 12px; background: var(--raised); min-height: 0; }
.lib-nhd { display: flex; gap: 8px; align-items: baseline; }
.lib-nhd .lib-n2 { flex: 1; }
.lib-tip { margin: 0; font-size: 12px; }
.lib-compose { border: 1px solid var(--s1-soft); background: var(--viz-partial-bg); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.lib-ncs { display: flex; flex-direction: column; gap: 8px; }
.lib-nc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--raised); }
.lib-nc.on { border-color: var(--viz-cat-3); box-shadow: 0 0 0 3px rgba(139,119,238,.15); }
.lib-nc.done { background: var(--surface); }
.lib-nc.done .lib-nx { color: var(--text-2); }
.lib-nh { display: flex; gap: 8px; align-items: center; }
.lib-nh .lib-nt { flex: 1; }
.lib-nh strong { font-size: 13.5px; }
.lib-nh .lib-n2 { font-size: 12px; }
.lib-q { display: block; text-align: left; margin: 0; border: 0; border-left: 3px solid var(--viz-cat-3); background: var(--viz-unsupported-bg); padding: 4px 8px; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; border-radius: 0 4px 4px 0; overflow-wrap: anywhere; }
.lib-nx { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lib-na { display: flex; gap: 2px; flex-wrap: wrap; margin-left: -4px; }
.lib-gen { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.lib-gen .lib-fact { justify-content: space-between; }
.lib-held { margin: auto; max-width: 520px; text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--state-near-ink); }
.lib-held h3 { margin: 0; color: var(--text); } .lib-held p { color: var(--text-2); margin: 0 0 6px; }
.lib-held .lib-fact { justify-content: center; }

/* side by side */
.lib-cseg { display: none; margin-bottom: 10px; }
.lib-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lib-pane { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lib-ph select { font-weight: 600; }
.lib-pane .lib-reader { height: calc(100vh - 210px); }
.lib-pane .lib-page { padding: 2.8em 3.1em; }
.lib-pane .lib-plus { right: -2.5em; }
.lib-pane input.lib-find { width: 100px; }

@media (max-width: 1180px) {
  .lib-reader.notes-on .lib-rbody { grid-template-columns: 0 minmax(0, 1fr) 300px; }
  .lib-reader.notes-on .lib-rail { display: none; }
  .lib-reader.compact.notes-on .lib-rbody { grid-template-columns: minmax(0, 1fr); }
  .lib-reader.compact.notes-on .lib-notes { position: absolute; right: 0; top: 0; bottom: 0; width: min(280px, 90%); z-index: 6; box-shadow: -8px 0 24px rgba(20,30,50,.12); }
  .lib-reader.compact .lib-rbody { position: relative; }
}
@media (max-width: 860px) {
  .lib-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lib-sidebox > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 14px; }
  .lib-sidebox > summary::-webkit-details-marker { display: none; }
  .lib-sidebox[open] > summary { margin-bottom: 10px; }
  .lib-side { position: static; }
  .lib-row { grid-template-columns: minmax(0, 1fr) auto 36px; gap: 8px; }
  .lib-row .lib-when, .lib-rh > span:nth-child(3) { display: none; }
  .lib-row .lib-tags { display: none; }
  .lib-bar1 .dc-btn2 span, .lib-bar1 .dc-btn span { font-size: 14px; }
  .lib-sbox { flex-basis: 100%; }
  .lib-fhead { flex-wrap: wrap; }
  .lib-fhead > .lib-nt { flex-basis: calc(100% - 70px); }
  .lib-acts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lib-reader { height: auto; min-height: 0; border-radius: 10px; }
  .lib-rbody, .lib-reader.notes-on .lib-rbody, .lib-reader.compact.notes-on .lib-rbody { display: flex; flex-direction: column; }
  .lib-rail { display: none; }
  .lib-canvas { padding: 12px 8px 24px; max-height: 72vh; }
  .lib-page { padding: 1.9em 1.5em 2.7em !important; min-height: 0; margin-bottom: 12px; }
  .lib-plus { right: 2px; top: -4px; width: 24px; height: 24px; }
  .lib-bw { margin: 0 -6px; padding: 0 28px 0 6px; }
  .lib-tools { gap: 6px; }
  .lib-tt { flex-basis: calc(100% - 44px); }
  .lib-fbox { flex: 1 1 100%; order: 5; }
  input.lib-find { flex: 1; width: auto; }
  .lib-tools > .lib-tg:last-child { flex-wrap: wrap; }
  .lib-notes, .lib-reader.compact.notes-on .lib-notes { position: static; width: auto; box-shadow: none; border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .lib-cseg { display: inline-flex; }
  .lib-compare { grid-template-columns: minmax(0, 1fr); }
  .lib-compare[data-show="a"] .lib-pane[data-side="b"], .lib-compare[data-show="b"] .lib-pane[data-side="a"] { display: none; }
  .lib-pane .lib-reader { height: auto; }
  .lib-dl { grid-template-columns: 100px 1fr; }
  .lib-tools .dc-btn2 span { font-size: 13px; }
}
.lib .lib-search, .lib input.lib-find { border: 0 !important; box-shadow: none !important; background: none !important; padding-left: 0; padding-right: 0; height: auto; }
.lib .lib-tr { color: var(--text-2); }
.lib .lib-tr.on { color: var(--viz-full-ink); }
.lib .lib-side, .lib .lib-sidebox { border: 0; background: none; width: auto; min-height: 0; }
.lib .lib-crumbs { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; height: auto; }