/* The styles of the hosted OS. They are a copy of the parts of os.css in the
   vault that the Tasks and Prospects views use: the house tokens, Public Sans,
   the shell, the task list, the page of a task and the prospect table (vault
   D28, repo D10hl). Change the look in os.css first, then copy it here. */
@font-face{font-family:Public Sans;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/public-sans-400.woff2) format('woff2')}
@font-face{font-family:Public Sans;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/public-sans-600.woff2) format('woff2')}
@font-face{font-family:Public Sans;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/public-sans-700.woff2) format('woff2')}
:root{--paper:#FFFFFF;--ink:#111513;--muted:#5D6661;--rule:#E2E6E3;--ground:#EEF0EE;--wash:#F6F8F7;
      --signal:#FF4F00;--tint:color-mix(in srgb,var(--signal) 16%,var(--paper));--r:2px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:'Public Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.6;
     -webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none!important}
.mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.name{font-size:19px;font-weight:400;letter-spacing:-.028em;line-height:1;white-space:nowrap}
/* The mark is the double rule under "Metric" (vault D28, repo D10hm). */
.name b{font-weight:700;text-decoration:underline double var(--signal);text-decoration-thickness:max(1px,.08em);
     text-underline-offset:.24em;text-decoration-skip-ink:none}
:focus,:focus-visible{outline:none}

/* The shell: one sidebar with the sections, and the pane, the one scroller.
   Below 880px the sidebar folds behind the menu in a plain masthead. */
.sheet.folder{display:grid;grid-template-columns:232px minmax(0,1fr);height:100vh;height:100dvh;background:var(--paper)}
.sheet.folder header{display:none;align-items:center;gap:14px;min-height:60px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.sheet.folder a.wordmark{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.side{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding:18px 10px 0;background:var(--wash);border-right:1px solid var(--rule);
     font-size:.875rem;line-height:1.45}
.side>a.wordmark{padding:4px 6px 6px}
.side .name{font-size:15px}
.side .secs{display:flex;flex-direction:column}
.side .secs a{display:block;padding:4px 6px;color:var(--ink);text-decoration:none;border-radius:var(--r)}
.side .secs a:hover{background:var(--tint)}
.side .secs a[aria-current="page"]{background:var(--ground);font-weight:600}
.side .who{margin-top:auto;padding:12px 6px 14px;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--muted);overflow-wrap:anywhere}
.side .who:empty{display:none}
.side .who button{display:block;margin-top:2px}
.sheet.folder .pane{min-height:0;overflow:auto;padding:0 clamp(16px,4vw,56px)}
.sheet.folder main{max-width:1040px;margin:0 auto;padding:28px 0 40px}
.sheet.folder main h1{font-size:clamp(1.5rem,2.5vw,2.5rem);font-weight:600;letter-spacing:-.028em;line-height:1.06;margin:0}
.sheet.folder .sub{margin-top:8px;max-width:56ch;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.sheet.folder header .menu{margin-left:auto}
.sheet.folder header .menu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
     width:44px;height:36px;border:1px solid var(--rule);border-radius:var(--r);cursor:pointer}
.sheet.folder header .menu summary::-webkit-details-marker{display:none}
.sheet.folder header .menu svg{width:16px;height:12px;display:block}
.sheet.folder header .menu svg path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}
.sheet.folder header .menu summary:hover{background:var(--tint)}
.sheet.folder header .menu[open] summary{background:var(--ground)}
@media (max-width:880px){
  .sheet.folder{display:flex;flex-direction:column}
  .sheet.folder header{display:flex}
  .sheet.folder .pane{flex:1 1 0}
  .side{display:none;border-right:0}
  .sheet.folder .side>a.wordmark{display:none}
  .sheet.folder:has(.menu[open]) .side{display:flex;flex:1 1 0}
  .sheet.folder:has(.menu[open]) .pane{display:none}
}
@media (max-width:680px){
  .sheet.folder header{container-type:inline-size}
  .sheet.folder header .name{font-size:max(13px,min(19px,calc((100cqw - 62px) / 12.4)))}
}

/* The parts the views share: the state line, the filter bar, the search, a text button. */
.state{margin-top:6px;max-width:76ch;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.search{margin-left:auto;width:200px;max-width:100%;padding:7px 10px;font:inherit;font-size:.875rem;line-height:1.4;color:var(--ink);
     background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);-webkit-appearance:none;appearance:none}
.search::placeholder{color:var(--muted);opacity:1}
.showall{font:inherit;font-size:.8125rem;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;
     text-decoration:underline;text-underline-offset:3px}
.showall:hover,.showall:focus-visible{color:var(--ink)}
/* The one button with a frame: Log in. */
.go{margin-top:20px;padding:9px 16px;font:inherit;font-size:.875rem;font-weight:600;line-height:1.4;color:var(--ink);
     background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);cursor:pointer}
.go:hover,.go:focus-visible{background:var(--tint)}

/* Tasks: one list by group, and the page of a task. Text, rules and space: the
   checkbox is the one control in a row. */
.v-tasks{max-width:82ch}
/* The view switch: three text buttons, the current one in ink. */
.v-tasks .views{display:flex;gap:14px;margin-top:12px;font-size:.8125rem}
.v-tasks .views button{font:inherit;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;
     text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.v-tasks .views button:hover,.v-tasks .views button:focus-visible{color:var(--ink)}
.v-tasks .views button[aria-pressed="true"]{color:var(--ink);text-decoration:none;cursor:default}
.v-tasks .tl.ranked{margin-top:20px}
.v-tasks h3+.tl.ranked{margin-top:0}
/* The rank: small and muted before the title, the same size on every row. */
.v-tasks .tl .tt:has(.rk){display:flex;align-items:baseline}
.v-tasks .rk{flex:none;min-width:3ch;margin-right:6px;font-size:.8125rem;color:var(--muted)}
.v-tasks h3{margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--rule);font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--ink)}
.v-tasks .tl{margin:0;padding:0;list-style:none}
.v-tasks .tl li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule);font-size:.9375rem;line-height:1.45}
.v-tasks .tl input[type=checkbox]{flex:none;margin:0;position:relative;top:1px;accent-color:var(--ink)}
.v-tasks .tl .tt{flex:1;min-width:0;color:var(--ink);text-decoration:none}
.v-tasks .tl .tt:hover{text-decoration:underline;text-decoration-color:var(--rule)}
.v-tasks .m{flex:none;font-size:.8125rem;color:var(--muted);white-space:nowrap}
.v-tasks .late{color:var(--ink)}
.v-tasks .tl .shut .tt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted)}
.v-tasks input.add{display:block;width:100%;margin:0;padding:7px 0 7px 23px;font:inherit;font-size:.9375rem;line-height:1.45;
     border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--ink)}
.v-tasks input.add::placeholder{color:var(--muted);opacity:.6}
.v-tasks input.add:focus{outline:0;border-bottom-color:var(--ink)}
.v-tasks .more{margin-top:20px;font-size:.8125rem}
.v-tasks .more a:empty{display:none}
.v-tasks .none{margin-top:20px;font-size:.875rem;color:var(--muted)}
.say:empty{display:none}
.say{margin-top:14px;font-size:.8125rem;color:var(--muted)}
/* A refusal stays in view wherever the pane is scrolled. */
.say.bad{position:fixed;left:0;right:0;bottom:0;z-index:10;margin:0;padding:10px 16px;background:var(--paper);border-top:1px solid var(--ink);color:var(--ink)}
.v-tasks dialog{margin:auto;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;
     border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.v-tasks dialog::backdrop{background:rgba(17,21,19,.34)}
.v-tasks .dwrap{padding:18px 20px 20px}
.v-tasks .dhead{margin-bottom:6px;font-size:.8125rem;line-height:1.5}
.v-tasks .dtitle{display:flex;gap:10px;align-items:baseline;font-size:1.0625rem;font-weight:600;line-height:1.4}
.v-tasks .dtitle input{flex:none;margin:0;position:relative;top:1px;accent-color:var(--ink)}
.v-tasks .dtitle .ti{flex:1;min-width:0;outline:0}
.v-tasks .dline{margin:4px 0 0 23px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.v-tasks .dline code{font-size:.8125rem;color:var(--ink)}
.v-tasks .dline a{color:inherit;text-underline-offset:3px}
.v-tasks .dbody{display:grid;grid-template-columns:64px 1fr;gap:6px 16px;margin-top:16px;font-size:.875rem;line-height:1.55}
.v-tasks .dbody dt{color:var(--muted)}
.v-tasks .dbody dd{color:var(--ink)}
.v-tasks .dbody input,.v-tasks .dbody select{width:100%;max-width:28ch;font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0}
.v-tasks .dbody select{-webkit-appearance:none;appearance:none;cursor:pointer}
.v-tasks .dbody input::placeholder{color:var(--muted)}
.v-tasks dialog textarea{display:block;width:100%;margin-top:16px;padding:8px 0;font:inherit;font-size:.875rem;line-height:1.55;
     border:0;border-top:1px solid var(--rule);border-radius:0;background:none;color:var(--ink);resize:vertical}
.v-tasks dialog textarea:focus{outline:0}
.v-tasks .subs{margin-top:12px;border-top:1px solid var(--rule)}
.v-tasks .subs li{font-size:.875rem}
.v-tasks dialog input.add{font-size:.875rem}
.v-tasks .log{margin:16px 0 0;padding:0;list-style:none;font-size:.8125rem;line-height:1.55;color:var(--muted)}
.v-tasks .log li{padding:3px 0}
.v-tasks dialog .say.bad{position:static;padding:8px 0 0;border:0}
.v-tasks .acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;margin-top:20px;font-size:.875rem}
.v-tasks .acts a,.v-tasks .more a,.v-tasks .dhead a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.v-tasks .acts a:hover,.v-tasks .more a:hover,.v-tasks .dhead a:hover{color:var(--ink)}
@media (max-width:760px){
.v-tasks .tl li{flex-wrap:wrap;row-gap:0}.v-tasks .m{flex-basis:100%;padding-left:23px}.v-tasks .m:empty{display:none}
.v-tasks dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border:0;border-radius:0}
.v-tasks .acts{position:sticky;bottom:0;margin:20px -20px -20px;padding:12px 20px;border-top:1px solid var(--rule);background:var(--paper)}
/* 16px keeps iOS from zooming into a field. */
.v-tasks dialog textarea,.v-tasks dialog input,.v-tasks dialog select,.v-tasks input.add,.search{font-size:16px}}

/* Prospects: one table. The status and the outreach are native selects drawn
   as text. A wash on hover and focus, held while a cell saves. The table scrolls
   sideways before the message and the read give up their measure. */
.v-prospects .tbl{overflow-x:auto;margin-top:10px;margin-left:-6px}
.v-prospects table{border-collapse:collapse;width:100%;font-size:.875rem;line-height:1.5}
.v-prospects th,.v-prospects td{text-align:left;vertical-align:top;padding:7px 16px 7px 6px;border-bottom:1px solid var(--rule)}
.v-prospects thead th{font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--ink)}
.v-prospects td{color:var(--muted)}
.v-prospects td.file{color:var(--ink)}
.v-prospects th:last-child,.v-prospects td:last-child{padding-right:0}
.v-prospects .flag{color:var(--ink)}
.v-prospects a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.v-prospects a:hover{color:var(--ink)}
.v-prospects td:has(select:hover),.v-prospects td:has(select:focus),.v-prospects td.saving{background:var(--wash)}
.v-prospects td select{font:inherit;color:inherit;background:none;border:0;padding:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.v-prospects td.when{white-space:pre}
.v-prospects td.long{min-width:30ch}
.v-prospects .empty{padding:12px 0;font-size:.875rem;color:var(--muted)}