/* Roles: the browse screen. The Mythical tokens (cyanotype dark, blueprint-paper light); system fonts only, no external fonts or scripts. */
:root{color-scheme:dark;
--sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif;--serif:ui-serif,"New York","Iowan Old Style",Charter,Georgia,serif;--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
--bg:#081A33;--bg2:#123059;--card:#0D2445;--ink:#EAF1FC;--ink2:#B4C6E2;--ink3:#8AA2C6;--line:#1F3F6B;--line2:#2F5688;
--accent:#6FE3D2;--accent2:#9CC8FF;--on-accent:#081A33;--row-hover:#10294F;--row-alt:#0D2445;--group:#123059;--human:#CDBDFF;--leak:#FFA8BA;--store:#6FE3D2;--shade:rgba(4,12,30,.62);
--link-hover:#C6DFFF;--primary-bg:#EAF1FC;--primary-fg:#081A33;--secondary-bg:#0D2445;--secondary-fg:#EAF1FC;--secondary-line:#3A6398;
--tag-fg:#CDBDFF;--tag-bg:#1C1D4A;--tag-line:#4E4A9A;--good:#6FE3D2;--good-bg:#0A2E37;--good-line:#1C5A60;--bad:#FFA8BA;--bad-bg:#33142A;--bad-line:#6E2648;
--note-bg:#123059;--note-line:#2F5688;--focus:#B9A6FF;--secret:#061328;--row-selected:#173A6B}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){color-scheme:light;
--bg:#EDF2F9;--bg2:#E2EAF5;--card:#F8FAFD;--ink:#0C2448;--ink2:#2E4A73;--ink3:#4D6890;--line:#C5D3E6;--line2:#93AACB;
--accent:#0A6A62;--accent2:#1C4FA0;--on-accent:#F8FAFD;--row-hover:#EEF3FA;--row-alt:#F8FAFD;--group:#E2EAF5;--human:#5537B8;--leak:#A8203F;--store:#0A6A62;--shade:rgba(12,36,72,.38);
--link-hover:#123A7A;--primary-bg:#0F3166;--primary-fg:#F8FAFD;--secondary-bg:#F8FAFD;--secondary-fg:#0C2448;--secondary-line:#93AACB;
--tag-fg:#5537B8;--tag-bg:#EEEAFD;--tag-line:#C6BAF2;--good:#0A6A62;--good-bg:#E1F3F1;--good-line:#A3D6D0;--bad:#A8203F;--bad-bg:#FBE9EE;--bad-line:#EDB1C0;
--note-bg:#E2EAF5;--note-line:#BCCBE0;--focus:#6A48D8;--secret:#E2EAF5;--row-selected:#DCE7F7}}
:root[data-theme="light"]{color-scheme:light;
--bg:#EDF2F9;--bg2:#E2EAF5;--card:#F8FAFD;--ink:#0C2448;--ink2:#2E4A73;--ink3:#4D6890;--line:#C5D3E6;--line2:#93AACB;
--accent:#0A6A62;--accent2:#1C4FA0;--on-accent:#F8FAFD;--row-hover:#EEF3FA;--row-alt:#F8FAFD;--group:#E2EAF5;--human:#5537B8;--leak:#A8203F;--store:#0A6A62;--shade:rgba(12,36,72,.38);
--link-hover:#123A7A;--primary-bg:#0F3166;--primary-fg:#F8FAFD;--secondary-bg:#F8FAFD;--secondary-fg:#0C2448;--secondary-line:#93AACB;
--tag-fg:#5537B8;--tag-bg:#EEEAFD;--tag-line:#C6BAF2;--good:#0A6A62;--good-bg:#E1F3F1;--good-line:#A3D6D0;--bad:#A8203F;--bad-bg:#FBE9EE;--bad-line:#EDB1C0;
--note-bg:#E2EAF5;--note-line:#BCCBE0;--focus:#6A48D8;--secret:#E2EAF5;--row-selected:#DCE7F7}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
h1,h2,h3{font-family:var(--serif);font-weight:500}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--accent2);text-underline-offset:2px}
a:hover{color:var(--link-hover)}
.app{height:100%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);min-width:0}

/* the top bar: surface, one line below, the brand in italic serif with the mono chip, the main nav, the data line, then the account */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-height:56px;padding:8px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:19px;line-height:24px;color:var(--ink)}
.brand small{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;border:1px solid var(--tag-line);background:var(--tag-bg);color:var(--tag-fg);font-family:var(--mono);font-style:normal;font-size:11px;font-weight:600;line-height:1}
.nav{display:flex;gap:4px;align-items:center}
.nav a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:6px;color:var(--ink2);font-size:13px;font-weight:500;text-decoration:none}
.nav a[aria-current="page"]{background:var(--bg2);color:var(--ink);font-weight:600}
.asof{color:var(--ink3);font-size:12px;line-height:16px}
.acct{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-left:auto}
.who{font-size:13px;color:var(--ink2);overflow-wrap:anywhere}
.acct a{font-size:13px;color:var(--ink);text-decoration:none}
.acct a:hover{color:var(--ink);text-decoration:underline}
.signout{margin:0}
.push{margin-left:auto}

/* notes: the design's note box; the stale note takes the bad tone */
.note{position:relative;margin:12px 24px 0;padding:12px 14px 12px 40px;border-radius:8px;border:1px solid var(--note-line);background:var(--note-bg);font-size:14px;line-height:20px;color:var(--ink)}
.note::before{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;background:var(--ink2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.25v3.5M8 5v.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.25v3.5M8 5v.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.note b{color:var(--ink);font-weight:600}
.note.stale{border-color:var(--bad-line);background:var(--bad-bg)}
.note.stale::before{background:var(--bad);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 2.2l6.2 11H1.8z' stroke-linejoin='round'/%3E%3Cpath d='M8 6.5v3M8 11.2v.2' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 2.2l6.2 11H1.8z' stroke-linejoin='round'/%3E%3Cpath d='M8 6.5v3M8 11.2v.2' stroke-linecap='round'/%3E%3C/svg%3E")}

/* buttons: the design's secondary by default, the light-on-navy primary, a borderless-feeling ghost */
.btn{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:6px;border:1px solid var(--secondary-line);background:var(--secondary-bg);color:var(--secondary-fg);font-size:13px;font-weight:500;white-space:nowrap}
.btn:hover{box-shadow:inset 0 0 0 999px rgba(140,170,220,.12)}
.btn.pri{border-color:var(--primary-bg);background:var(--primary-bg);color:var(--primary-fg);font-weight:600}
.btn.pri:hover{color:var(--primary-fg)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink2)}
a.btn,a.btn:hover{color:var(--secondary-fg);text-decoration:none}
a.btn.pri,a.btn.pri:hover{color:var(--primary-fg)}
.bar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:10px 16px}

/* the view tabs: underline tabs on one rule, the view actions after the separator */
.views{gap:0 8px;padding:0 24px;margin-top:6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;box-shadow:inset 0 -1px 0 var(--line)}
.vtab{flex:none;height:40px;padding:0 2px;margin-right:12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--ink2);font-size:14px;font-weight:500;white-space:nowrap}
.vtab:hover{color:var(--ink)}
.vtab.on{border-bottom-color:var(--ink);color:var(--ink);font-weight:600}
.vtab .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--human);margin-left:7px;vertical-align:2px}
.vtab .mail{margin-left:6px;font-size:11px}
.vsep{width:1px;height:20px;align-self:center;background:var(--line2);margin-right:4px;flex:none}
.main{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:0}
.chips{display:flex;flex-wrap:wrap;gap:5px}

/* inputs: the design's field, on the page ground */
.field{width:100%;height:30px;background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:0 10px;color:var(--ink);font-size:13px}
.field::placeholder{color:var(--ink3)}
.row2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label.tog{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink2);cursor:pointer}
.work{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0}

/* the tool row and the filter summary form one card above the grid */
.tools{gap:8px 12px;margin:14px 24px 0;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0}
.count{font-size:13px;color:var(--ink2);white-space:nowrap}
.count b{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
select.field{width:auto;padding:0 8px;font-size:13px}
/* the active conditions: one chip per builder row, each with its remove, a dashed cluster for a nested group */
.summary{display:flex;flex-wrap:wrap;gap:6px 6px;align-items:center;margin:0 24px 14px;padding:8px 14px 10px;background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:0 0 10px 10px;font-size:13px;color:var(--ink3);min-height:38px;min-width:0;contain:inline-size}
.sumlead{color:var(--ink2);font-weight:600;margin-right:2px}
.sumconj{color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.chip{display:inline-flex;align-items:stretch;max-width:100%;height:28px;border:1px solid var(--line2);border-radius:14px;background:var(--bg);overflow:hidden}
.chipt{border:0;background:transparent;color:var(--ink);font-size:13px;padding:0 6px 0 11px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border-radius:14px 0 0 14px}
.chipt:hover{color:var(--accent2);background:var(--row-hover)}
.chipx{border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink3);width:28px;padding:0;font-size:16px;line-height:1;flex:none;border-radius:0 14px 14px 0}
.chipx:hover{color:var(--bad);background:var(--bad-bg)}
.chip.foreign .chipt{color:var(--ink3);font-style:italic}
.sumgrp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;min-width:0;padding:3px 6px;border:1px dashed var(--line2);border-radius:10px}

/* the grid: a surface card, the header row on surface-2, hairline rows, hover and selected from the design */
.gridwrap{position:relative;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);margin:0 24px 16px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.scroller{overflow:auto;min-height:0;position:relative}
.head{position:sticky;top:0;z-index:2;display:flex;width:var(--gw);background:var(--bg2);border-bottom:1px solid var(--line)}
.head button{border:0;background:transparent;text-align:left;padding:0 10px;height:34px;font-size:12px;color:var(--ink3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;border-radius:0}
.head button:hover{color:var(--ink)}
.head button.sorted{color:var(--ink)}
.canvas{position:relative;width:var(--gw)}
.r{position:absolute;left:0;display:flex;height:34px;width:var(--gw);align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
.r:nth-child(even){background:var(--row-alt)}
.r:hover{background:var(--row-hover)}
.r.sel,.r.sel:hover{background:var(--row-selected)}
.c{flex:none;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.c.strong{color:var(--ink);font-weight:500}
.c.num{font-variant-numeric:tabular-nums}
.c.dim{color:var(--ink3)}
.c.mono{font-size:12px}
.star{border:0;background:transparent;color:var(--ink3);font-size:15px;line-height:1;padding:0 2px;width:100%}
.star.on{color:var(--good)}
.g{position:absolute;left:0;display:flex;gap:10px;align-items:center;height:34px;width:var(--gw);padding:0 10px;background:var(--group);border-bottom:1px solid var(--line2);font-weight:600;cursor:pointer;color:var(--ink)}
.g .tw{display:inline-block;width:10px;color:var(--ink3)}
.g i{font-style:normal;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums}
.empty{padding:40px 16px;color:var(--ink3)}

/* the drawer: a surface column beside the grid; below 900px it lies over the grid, at phone width edge to edge */
.drawer{width:clamp(340px,30vw,440px);min-height:0;background:var(--card);border-left:1px solid var(--line);display:grid;grid-template-rows:auto minmax(0,1fr)}
.drawer header{display:flex;gap:12px;align-items:flex-start;padding:16px 24px 14px}
.drawer header>div{display:flex;flex-direction:column;gap:6px}
.drawer h2{margin:0;font-size:26px;line-height:32px;font-weight:500;text-wrap:pretty}
.drawer .co{order:1;color:var(--ink2);font-size:14px;line-height:20px;font-weight:400}
/* the company's mark before its name: a 20px plate on white so a dark glyph reads on the cyanotype ground; hidden when the mark fails to load */
.drawer .mark{display:inline-block;width:20px;height:20px;padding:2px;margin-right:8px;border-radius:4px;background:#FFF;object-fit:contain;vertical-align:top}
.drawer [data-close]{flex:none;width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:0;line-height:0}
.drawer [data-close]::before{content:"\00d7";font-size:20px;line-height:1;color:var(--ink2)}
.drawer .body{overflow:auto;padding:0 24px 32px;display:grid;gap:18px;align-content:start}
.drawer .row2 .btn{height:36px;padding:0 14px;font-size:14px}
.drawer .row2 .btn.pri{padding:0 16px}
dl.facts{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 16px;margin:0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;line-height:18px}
dl.facts dt{color:var(--ink3)}
dl.facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
dl.facts dd.mono{font-size:12px;color:var(--ink2);word-break:break-all}
.jd{color:var(--ink3);font-size:13px;line-height:18px}
.jd>b{display:block;font-family:var(--serif);font-size:16px;line-height:22px;font-weight:500;margin-bottom:6px}
.jdbody{white-space:pre-wrap;color:var(--ink);font-size:14px;line-height:21px;max-width:62ch}
/* notes from the group: members' words with their names on them, in the design's note plate, beside the facts and never inside them */
.notes{display:grid;gap:10px;color:var(--ink3);font-size:13px;line-height:18px}
.notes>b{display:block;font-family:var(--serif);font-size:16px;line-height:22px;font-weight:500;color:var(--ink2)}
.notes ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notes li{padding:10px 12px;border:1px solid var(--note-line);border-radius:8px;background:var(--note-bg);color:var(--ink);font-size:13px;line-height:19px;overflow-wrap:anywhere}
.notes li .by{display:block;margin-top:4px;font-size:12px;line-height:16px;color:var(--ink3)}
.notes li .fld{font-family:var(--mono);font-size:12px;color:var(--human)}
.notes .hint{font-size:12px;line-height:16px;color:var(--ink3)}
.notes .propose{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.notes .propose select.field{width:auto;max-width:100%}
.notes .propose textarea.field{font-family:inherit;font-size:13px;line-height:18px;min-height:72px}
.notes .propose .row2{justify-content:space-between}

/* dialogs and popovers: plates with a 10px radius */
dialog{border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--ink);padding:0;width:min(560px,calc(100% - 32px));max-height:min(86%,720px)}
dialog::backdrop{background:var(--shade)}
.dlg{display:grid;gap:14px;padding:20px}
.dlg h3{margin:0;font-size:20px;line-height:26px;font-weight:500}
.dlg p{margin:0;color:var(--ink2);font-size:14px;line-height:20px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px}
.addr{background:var(--secret);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-size:12px;line-height:18px;overflow-wrap:anywhere;color:var(--ink)}
.addr b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
textarea.field{height:auto;min-height:120px;padding:8px 10px;font-family:var(--mono);font-size:12px;line-height:18px}
.pop{position:absolute;z-index:15;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;display:grid;gap:5px;box-shadow:0 14px 30px var(--shade);max-height:60%;overflow:auto}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;z-index:40}

.search{width:min(250px,100%)}
.btn.active{border-color:var(--good-line);background:var(--good-bg);color:var(--good)}
.badge{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 6px;margin-left:6px;border-radius:9px;background:var(--bg2);color:var(--ink);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.btn.active .badge{background:var(--good);color:var(--good-bg)}

/* the filter builder: a dialog over the grid; one row per condition (field, operator, value, remove, the unknown switch beneath), nested groups as cards */
.fpanel{position:absolute;z-index:12;top:8px;left:14px;width:min(960px,calc(100% - 28px));max-height:calc(100% - 20px);overflow:auto;background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 44px var(--shade);padding:14px 16px 16px;display:grid;gap:10px;align-content:start}
.fpanel h3{margin:0;font-size:17px;line-height:22px;font-weight:500}
.fpanel h3:focus-visible{outline-offset:4px}
.fhead{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fcount{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.fs.auto{width:auto;max-width:100%}
.fclose{width:32px;flex:none}
.nlmsg{font-size:13px;color:var(--ink3)}
.fhint{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink)}
.fhint select.fs{width:auto;font-weight:500}
.frow{position:relative;display:grid;grid-template-columns:24px 56px minmax(150px,200px) minmax(130px,170px) minmax(0,1fr) 34px;gap:6px;align-items:start;margin-top:6px}
.frow.grp{grid-template-columns:24px 56px minmax(0,1fr)}
.frow .unk{grid-column:3/6;margin:0 0 2px 2px;color:var(--ink3);font-size:12px;min-height:0}
.frow .unk input{margin:0}
.frow.foreign .fs:disabled{opacity:.6}
.frow.flash > .fs,.frow.flash > .fv > .fs,.frow.flash > .fv.multi{box-shadow:0 0 0 2px var(--focus)}
.fpre{font-size:13px;color:var(--ink2);padding-top:7px;padding-left:2px;white-space:nowrap}
.fpre.dim{color:var(--ink3)}
select.fs,.fs{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:0 8px;color:var(--ink);font-size:13px;min-height:32px}
select.fs.conj{padding-inline:6px}
.fbox{border:1px solid var(--line);border-radius:10px;padding:8px 10px 10px;background:var(--bg2)}
.fghead{display:flex;gap:8px;align-items:center}
.fghead select{width:auto;max-width:270px}
.fglabel{font-size:13px;color:var(--ink2)}
.fghead .push{margin-left:auto}
button.fs.multi{display:flex;flex-wrap:wrap;gap:4px;align-items:center;text-align:left;padding:3px 8px}
.vchip{display:inline-flex;align-items:center;height:20px;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:0 6px;font-size:11px;font-weight:600;color:var(--ink2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ph{color:var(--ink3)}
.fdel{border:1px solid transparent;background:transparent;border-radius:6px;height:32px;color:var(--ink2);font-size:16px;line-height:1}
.fdel:hover{color:var(--bad);border-color:var(--bad-line)}
.fadd{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.flink{border:0;background:transparent;color:var(--accent2);font-weight:500;font-size:13px;padding:2px 0}
.flink.dim{color:var(--ink3)}
.flink:hover{text-decoration:underline}
.fnone{font-size:13px;color:var(--ink3);padding-top:7px}
.days{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink3)}
.days input{width:150px}
.days input[type="number"]{width:90px}
.days .dim{color:var(--ink3)}
.dpres{display:inline-flex;gap:4px;flex-wrap:wrap}
.dpre{height:26px;padding:0 8px;border:1px solid var(--line2);border-radius:13px;background:transparent;color:var(--ink2);font-size:12px;white-space:nowrap}
.dpre:hover{color:var(--ink);border-color:var(--line2);background:var(--row-hover)}
.dpre.on{color:var(--good);border-color:var(--good-line);background:var(--good-bg);font-weight:600}
.fv.range{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.bound{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--ink3);white-space:nowrap}
.bound input{width:130px}
/* moving rows: the grip (dots drawn in CSS, no glyph) at the left of a row or a top-level chip; the lifted row fades, the
   slot shows as an accent line beside the row or chip it lands next to, or as a ring on the empty group it would fill;
   on a phone a copy of the row rides under the finger. touch-action none keeps a press on the grip from scrolling. */
.fgrip,.chipg{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink3);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fgrip::before,.chipg::before{content:"";width:8px;height:15px;background:radial-gradient(circle,currentColor 1.2px,transparent 1.6px) 0 0/4px 5px}
.fgrip{width:24px;min-height:32px;border-radius:6px}
.fgrip:hover,.chipg:hover{color:var(--ink);background:var(--row-hover)}
.fgrip:active,.chipg:active{cursor:grabbing}
.chipg{width:18px;border-right:1px solid var(--line);border-radius:14px 0 0 14px}
.chipg+.chipt{padding-left:8px}
.sumgrp>.chipg{height:22px;width:16px;border:0;border-radius:4px}
.frow.dragging,.chip.dragging,.sumgrp.dragging{opacity:.35}
.frow.drop-before::before,.frow.drop-after::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:1px;background:var(--accent2);pointer-events:none}
.frow.drop-before::before{top:-4px}
.frow.drop-after::after{bottom:-4px}
.fbox.drop-into{box-shadow:inset 0 0 0 2px var(--accent2)}
.chip.drop-before,.sumgrp.drop-before{box-shadow:-5px 0 0 -1px var(--accent2)}
.chip.drop-after,.sumgrp.drop-after{box-shadow:5px 0 0 -1px var(--accent2)}
.fghost{position:fixed;z-index:50;margin:0;pointer-events:none;opacity:.94;background:var(--card);border-radius:8px;box-shadow:0 14px 30px var(--shade)}
.optpop{position:fixed;z-index:30;width:min(320px,calc(100% - 32px));max-height:340px;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:0 14px 30px var(--shade);overflow:hidden}
.optpop input{height:36px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg)}
.optlist{overflow:auto;padding:4px}
.optlist button{display:flex;gap:8px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:5px 8px;border-radius:6px;font-size:13px;color:var(--ink2)}
.optlist button:hover{background:var(--row-hover)}
.optlist button.on{color:var(--ink);font-weight:600}
.optlist .box{width:14px;height:14px;border:1.5px solid var(--line2);border-radius:4px;flex:none;display:grid;place-items:center;font-size:11px;line-height:1;color:var(--primary-fg)}
.optlist button.on .box{background:var(--primary-bg);border-color:var(--primary-bg)}
.optlist .n{margin-left:auto;color:var(--ink3);font-variant-numeric:tabular-nums}
.railbtn{display:none}
@media(prefers-reduced-motion:no-preference){.r,.chip,.btn,.vtab{transition:background .12s,border-color .12s,color .12s}}

/* the live screen */
select.field.small{font-size:12px;padding:0 6px}
/* the cadence control in the view row ("Email me changes" and its select) stays one unit on the scrolling row */
.views .tog{flex:none;white-space:nowrap}
/* the Watch buttons in the drawer: the company one carries the company's name, so its label ellipsizes rather than widening
   the drawer (the row is a grid item, and min-width 0 lets it stay the drawer's width instead of the button's) */
.drawer .row2{min-width:0}
.drawer .btn[data-watch]{max-width:100%}
.drawer .btn[data-watch]>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb{display:grid;gap:8px}
.fb label{font-size:12px;color:var(--ink3)}

/* below 900px the drawer lies over the grid */
@media(max-width:900px){
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:20;box-shadow:-18px 0 40px var(--shade)}
}
/* phone: the bar wraps into the brand row, the nav row and the data line; 16px gutters; the page scrolls and the grid keeps a fixed share of the viewport; the drawer edge to edge */
@media(max-width:720px){
  .top{padding:4px 16px 0;gap:0 18px}
  .brand{order:1;min-height:44px}
  .signout{order:2;margin-left:auto}
  .signout .btn{height:44px;padding:0 14px;font-size:14px}
  .top::after{content:"";order:3;flex-basis:100%;height:0;border-top:1px solid var(--line)}
  .nav{order:4;gap:18px}
  .acct{order:5;margin-left:0;gap:0 18px}
  .who{display:none}
  .nav a,.acct a{display:inline-flex;align-items:center;min-height:44px;padding:0;background:transparent;color:var(--ink);font-size:14px;font-weight:500}
  .nav a[aria-current="page"]{background:transparent;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent2);text-decoration-thickness:2px;text-underline-offset:6px}
  .top .asof{order:6;flex-basis:100%;padding:2px 0 10px}
  .app{height:auto;min-height:100%}
  .note{margin:12px 16px 0}
  .views{padding:0 16px;gap:0 8px;scrollbar-width:none}
  .views::-webkit-scrollbar{display:none}
  .vtab{height:44px}
  .tools{margin:12px 16px 0;padding:10px 12px}
  .summary{margin:0 16px 12px;padding:8px 12px 10px}
  .gridwrap{margin:0 16px 12px;height:72vh}
  .btn,.field,select.field{min-height:36px}
  .search{width:100%}
  .drawer{width:100%;border-left:0;box-shadow:none}
  .drawer header{padding:12px 16px 12px}
  .drawer h2{font-size:24px;line-height:30px}
  .drawer .body{padding:0 16px 32px}
  .drawer .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .drawer .row2 .btn{height:44px;justify-content:center;padding:0 10px}
  dl.facts{grid-template-columns:96px minmax(0,1fr);font-size:14px;line-height:20px}
  .chip{height:auto;min-height:32px}.chipt{white-space:normal;padding-top:6px;padding-bottom:6px;line-height:18px}.chipx{width:32px}
  .fpanel{left:8px;width:calc(100% - 16px);padding:12px;top:4px;max-height:calc(100% - 8px)}
  .fhead{gap:6px 8px}
  .fhead .fs.auto{min-height:36px}
  .frow{grid-template-columns:24px 48px minmax(0,1fr) 34px}
  .frow > .fgrip{grid-column:1;grid-row:1}.frow > .fpre{grid-column:2;grid-row:1}
  .frow > .ff{grid-column:3;grid-row:1}.frow > .fdel{grid-column:4;grid-row:1}.frow > .fo{grid-column:3;grid-row:2}.frow > .fv{grid-column:3;grid-row:3}.frow > .unk{grid-column:3;grid-row:4}
  .frow.grp{grid-template-columns:24px minmax(0,1fr)}.frow.grp > .fpre{padding-left:0}.frow.grp > .fbox{grid-column:1/3}
  .fbox{padding:8px 8px 10px}
  .bound input{width:110px}
  .optpop{width:calc(100% - 16px);left:8px!important;max-height:min(340px,60vh)}
}