/* What the app adds to the canvas's stylesheet (tidekeeper.css): the page
   itself, and "follow the system" for the theme. The canvas sets a theme on
   each board; the app sets none until someone presses `t`. */
html, body { margin: 0; min-height: 100%; }
/* The typefaces, served by tidekeeper itself (`crates/tidekeeper-web/fonts`,
   each with its licence), beside this file under the same version. The canvas gets the same three from its own
   links, so they are named here and not in tidekeeper.css. */
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url(fonts/spline-sans-mono.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
/* The canvas's stylesheet uses .c2, .c3 and .c4 twice: for a grid of that
   many columns, and for a colour of a code sample. A grid is not a colour:
   without this, text in a three-column grid that names no colour of its own
   comes out in the water's blue (the prices did). */
.tl .grid.c2, .tl .grid.c3, .tl .grid.c4 { color: inherit; }
/* The page inside the frame. When the frame has said that the site is not
   there, or was not given, the parts that would each say it again are
   put away. */
.tl .main > .body { display: contents; }
.tl .main > .lost ~ .body { display: none; }
.tl .main > .lost { padding: 24px 0 48px; }
/* A report of hard mode on an easy site is its own page, laid over the
   report's as `.lost` is (doc/polish.md, C8). */
.tl .main > .off-easy ~ .body { display: none; }
.tl .off-easy .pill.off { padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--raised); color: var(--text-2); }
.tl .off-easy .pill.off i { display: inline-flex; width: 15px; height: 15px; }
.tl .off-easy .off-hard { border-color: color-mix(in srgb, var(--water) 40%, var(--line)); }
.tl .off-easy h2 { font: 500 22px/1.25 var(--serif); margin: 0; }
.tl .sketch { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.tl .sketch i { display: block; height: 30px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--water-wash) 0 7px, color-mix(in srgb, var(--water) 22%, transparent) 7px 14px); }

/* The sidebar stays in view (doc/polish.md, C17): the window's height, the
   site at its top, Needs attention and Settings at its foot, and only the
   list between scrolls, when the window is too short for it. */
.tl .side .side-mid, .tl .side .side-foot { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1025px) {
  /* Sticky, it is a layer of its own: above the page, or what opens from
     it (the site switcher) falls behind the page's figures. */
  .tl .side { position: sticky; top: 0; z-index: 30; align-self: flex-start; height: 100vh; height: 100dvh; overflow: hidden; }
  .tl .side .side-mid { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -12px; padding: 0 12px 12px; scrollbar-width: thin; }
  .tl .side .side-foot { flex: none; margin: 0 -12px; padding: 8px 12px 0; border-top: 1px solid var(--line); }
}
/* The off icon, at the end of a part of the water an easy site has off. */
.tl .nav .tail { margin-left: auto; display: inline-flex; color: var(--text-3); }
.tl .nav .tail svg { width: 18px; height: 18px; }
.tl .tideline:not(:has(span)) { padding-bottom: 4px; }
@media (prefers-color-scheme: light) {
  .tl:not([data-theme="dark"]):not([data-theme="light"]) {
    --violet:#6A4FC7; --violet-wash:rgba(106,79,199,.12); --rose:#B83A78; --rose-wash:rgba(184,58,120,.11);
    --ink-filter:none;
    --bg:#EEF2F0; --surface:#FBFCFB; --raised:#E1E8E5; --line:#CBD5D1; --line-2:#788A84;
    --text:#0C191B; --text-2:#3A4D50; --text-3:#4F6366;
    --shore:#A8741A; --shore-text:#734C00; --shore-wash:rgba(168,116,26,.14);
    --water:#2F6BD6; --water-text:#1B4EA6; --water-wash:rgba(47,107,214,.12);
    --live:#16876F; --live-text:#0F6B58; --live-wash:rgba(22,135,111,.12);
    --alert:#C2412D; --alert-text:#B23A26; --alert-wash:rgba(194,65,45,.10);
    --ink:#0C191B; --on-ink:#EEF2F0; --on-mark:#FFFFFF;
    --shadow:0 18px 48px rgba(14,27,29,.16);
    color-scheme:light;
  }
}

/* The frame. The canvas puts `tl` and `app` on one element; the app puts
   `tl` on the body, so the theme is the whole page's, and `app` inside it. */
.tl .app { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; }
.tl .side a.site { text-decoration: none; }
/* A part of hard mode on an easy site: in the shade the stylesheet gives it
   (--text-3), which can be read. Dimmed further it could not (2.3:1). */
.tl kbd { font: 500 12px var(--mono); padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--raised); }

/* A narrow window: the sidebar is a drawer (doc/look-build-spec.md R11,
   below), and the page the window's width, without a desk's margins: at
   761 px they left a table of tokens 4 px short. */
@media (max-width: 900px) {
  .tl .main { flex: 1 1 100%; padding: 32px 28px 56px; }
}
/* Phone width: everything in one column, and anything pressed is at
   least 44 px tall. */
@media (max-width: 760px) {
  .tl .main { padding: 16px; gap: 16px; }
  .tl .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl .kpi { padding: 14px 16px 16px; }
  .tl .kpi .v { font-size: 30px; }
  .tl .card { padding: 18px 16px; }
  /* The sign-in pages' drawing is a desk's: on a phone its line is enough,
     under the form, not a screen of strata (doc/launch.md, 3). */
  .tl .authart { min-height: 0; padding: 28px 16px; border-left: 0; border-top: 1px solid var(--line); }
  .tl .authart svg { display: none; }
  .tl .grid.c2, .tl .grid.c3 { grid-template-columns: minmax(0, 1fr); }
  .tl .seg > * , .tl .btn, .tl .tab { min-height: 44px; }
  .tl .head { align-items: flex-start; }
  .tl h1 { font-size: 26px; }
}

/* A count beside a label in a segment or a tab: flex drops the space
   between them, so the gap is said here. */
.tl .seg > a, .tl .seg > button, .tl .tab { gap: 6px; }


/* A site's own icon beside its name: tidekeeper's copy, or a letter. */
.tl img.fav { width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; margin-right: 8px; object-fit: contain; flex: none; }
/* In a list the icon stays beside the name, however narrow the column. */
.tl a.named { display: inline-flex; align-items: center; vertical-align: middle; }
.tl .side .site > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Six figures go six across or three and three. Fitted as many to a row as
   there was room for, they came out five and one. The lines between them
   are the gaps, so no row ends in a line and the rows have one between. */
/* When in the week (the Hours board): a cell an hour, darker the busier.
   No cell holds text, so the grid is as narrow as its card. */
.tl .heat.hours { grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; }
.tl .heat.hours > * { padding: 0; min-height: 26px; min-width: 0; }
/* The weeks by return: each row is a row to a screen reader and nothing
   to the grid (display: contents), so its cells are the grid's. */
.tl .heat.cohorts > [role="row"] > * { min-height: 38px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; }
.tl .heat.hours .hd { justify-content: flex-start; }
.tl .heat.hours .hd.h3 { grid-column: span 3; }
/* The quietest hour is pale, never the card itself: an hour with nobody
   is still an hour of the week (it vanished, 18 October). */
.tl .heat.hours .cell { border-radius: 3px; background: color-mix(in srgb, var(--shore) calc(max(var(--a, 0), 8) * 1%), var(--surface)); }
.tl .heat.hours .cell.none { background: none; outline: 1px dashed var(--line); outline-offset: -1px; }
.tl .heat.hours.small { grid-template-columns: 30px repeat(24, minmax(0, 1fr)); }
.tl .heat.hours.small > * { min-height: 13px; }
.tl .heat.hours.small > .hd { min-height: 0; line-height: 1.2; }
.tl .shades { display: inline-flex; gap: 3px; }
.tl .shades i { width: 18px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--shore) calc(var(--a, 0) * 1%), var(--surface)); }
/* A figure that can be pressed, to put it on the chart under the row. */
.tl button.kpi { font: inherit; color: inherit; text-align: left; border-width: 0 1px 0 0; border-style: solid; border-color: var(--line); border-radius: 0; background: none; cursor: pointer; }
.tl button.kpi:last-child { border-right: 0; }
.tl button.kpi.on { background: none; }
.tl button.kpi:hover .k { color: var(--text); }
.tl .kpis:has(> .kpi:nth-child(6):last-child) { gap: 1px; background: var(--line); }
.tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi { border-right: 0; background: var(--surface); }
.tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi.on { background: var(--raised); }
@media (min-width: 761px) {
  .tl .kpis:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1320px) {
  .tl .kpis:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Two tables side by side need more room than two cards of anything else:
   under it they are one above the other, each the full width. And a long
   address in a table breaks where it must, not only at a slash. */
.tl .grid.c2.tables { grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr)); }
.tl td.name, .tl th.name { overflow-wrap: anywhere; }
/* A table of seven columns beside the settings menu (API tokens): the
   look's type left it a few pixels over at 1280 px. */
.tl table.snug th, .tl table.snug td { padding-left: 10px; padding-right: 10px; }
/* When an alert began or ended, at a row's end: right, and on two lines
   where a phone has no room for one. */
.tl td.since { text-align: right; }
.tl td.n { white-space: nowrap; }
/* The buttons at the end of a row are not a figure: they may go one
   above the other. */
.tl td.acts { white-space: normal; }

/* A note on a day past the middle of a chart is written to the left of
   its line: to the right it ran off the card (a note on today did). */
.tl .flag.r span { left: auto; right: 6px; }

/* A table in a card that is narrower than the table. It is not left to
   scroll sideways, where the last columns are out of sight with nothing
   to say so: a table says which of its columns go first as the card gets
   narrower. `h3-640` on a table: its third column is not shown in a card
   under 640 px. `only-640` on anything inside: shown only then, for what
   a column held that still has to be said (in a line under the name).
   The card is what is measured, never the window, so a table is the same
   in a narrow card on a wide window as on a phone. */
.tl .scroll { container-type: inline-size; }
.tl .only-900, .tl .only-760, .tl .only-640, .tl .only-520, .tl .only-420 { display: none; }
@container (max-width: 899px) {
  .tl table.h2-900 tr > :nth-child(2), .tl table.h3-900 tr > :nth-child(3), .tl table.h4-900 tr > :nth-child(4), .tl table.h5-900 tr > :nth-child(5), .tl table.h6-900 tr > :nth-child(6), .tl table.h7-900 tr > :nth-child(7), .tl table.h8-900 tr > :nth-child(8) { display: none; }
  .tl .gone-900 { display: none; }
  .tl .only-900 { display: block; }
  .tl .only-900.il { display: inline-flex; }
}
@container (max-width: 759px) {
  .tl table.h2-760 tr > :nth-child(2), .tl table.h3-760 tr > :nth-child(3), .tl table.h4-760 tr > :nth-child(4), .tl table.h5-760 tr > :nth-child(5), .tl table.h6-760 tr > :nth-child(6), .tl table.h7-760 tr > :nth-child(7), .tl table.h8-760 tr > :nth-child(8) { display: none; }
  .tl .gone-760 { display: none; }
  .tl .only-760 { display: block; }
  .tl .only-760.il { display: inline-flex; }
}
@container (max-width: 639px) {
  .tl table.h2-640 tr > :nth-child(2), .tl table.h3-640 tr > :nth-child(3), .tl table.h4-640 tr > :nth-child(4), .tl table.h5-640 tr > :nth-child(5), .tl table.h6-640 tr > :nth-child(6), .tl table.h7-640 tr > :nth-child(7), .tl table.h8-640 tr > :nth-child(8) { display: none; }
  .tl .gone-640 { display: none; }
  .tl .only-640 { display: block; }
  .tl .only-640.il { display: inline-flex; }
}
@container (max-width: 519px) {
  .tl table.h2-520 tr > :nth-child(2), .tl table.h3-520 tr > :nth-child(3), .tl table.h4-520 tr > :nth-child(4), .tl table.h5-520 tr > :nth-child(5), .tl table.h6-520 tr > :nth-child(6), .tl table.h7-520 tr > :nth-child(7), .tl table.h8-520 tr > :nth-child(8) { display: none; }
  .tl .gone-520 { display: none; }
  .tl .only-520 { display: block; }
  .tl .only-520.il { display: inline-flex; }
}
@container (max-width: 419px) {
  .tl table.h2-420 tr > :nth-child(2), .tl table.h3-420 tr > :nth-child(3), .tl table.h4-420 tr > :nth-child(4), .tl table.h5-420 tr > :nth-child(5), .tl table.h6-420 tr > :nth-child(6), .tl table.h7-420 tr > :nth-child(7), .tl table.h8-420 tr > :nth-child(8) { display: none; }
  .tl .gone-420 { display: none; }
  .tl .only-420 { display: block; }
  .tl .only-420.il { display: inline-flex; }
}
@container (max-width: 519px) {
  .tl th, .tl td { padding-left: 6px; padding-right: 6px; }
}
@container (max-width: 419px) {
  .tl th, .tl td { padding-left: 4px; padding-right: 4px; }
}
/* Headings of several words may take two lines in a table that says so. */
.tl table.wrap th { white-space: normal; }

/* Two things set against each other, a line at a time (easy and hard).
   In a narrow card each line's name goes above its two answers, which
   stay side by side: three columns of forty characters are no use. */
@container (max-width: 639px) {
  .tl table.duo, .tl table.duo thead, .tl table.duo tbody { display: block; }
  .tl table.duo tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .tl table.duo th, .tl table.duo td { width: auto !important; border-bottom: 0; }
  .tl table.duo tr > :first-child { grid-column: 1 / -1; padding-bottom: 0; font-weight: 600; }
  .tl table.duo thead tr > :first-child { display: none; }
}

/* The grid of who came back, a week a column. A narrow card shows the
   first weeks and says so: the grid is never cut off at the card's edge. */
.tl .heat.cohorts {
  --n: var(--n-all);
  grid-template-columns: var(--c1, 170px) var(--c2, 90px) repeat(var(--n), minmax(var(--cw, 48px), 1fr));
}
@container (max-width: 899px) { .tl .heat.cohorts { --n: var(--n-900); } }
@container (max-width: 759px) {
  .tl .heat.cohorts { --n: var(--n-760); --c1: 132px; --c2: 64px; --cw: 46px; }
  /* "so far" goes under the dates rather than breaking them in three. */
  .tl .heat.cohorts > [role="row"] > * { flex-wrap: wrap; row-gap: 2px; padding-top: 2px; padding-bottom: 2px; }
  .tl .heat.cohorts .pill { margin-left: 0 !important; }
}
@container (max-width: 639px) { .tl .heat.cohorts { --n: var(--n-640); } }
@container (max-width: 519px) {
  .tl .heat.cohorts { --n: var(--n-520); --c1: 104px; --c2: 48px; --cw: 40px; }
  .tl .heat.cohorts > [role="row"] > * { padding: 2px 4px; font-size: 12px; flex-wrap: wrap; }
  .tl .heat.cohorts .pill { margin-left: 0 !important; }
}

/* A row of choices wider than its place takes a second line. It was cut
   off at the edge, the last choices with it. */
.tl .seg { flex-wrap: wrap; max-width: 100%; }

/* A state is a few words on one line. Where it is a sentence (a rule a
   banner is held to) it takes the lines it needs, its dot by the first. */
.tl .state.wraps { white-space: normal; align-items: flex-start; }
.tl .state.wraps .dot { flex: none; margin-top: 6px; }

/* A control that opens a small form under itself: two dates for a period,
   three fields for a filter. It is `details`, so it opens without script. */
.tl details.pick { position: relative; }
/* As tall as a button: Custom stands beside Add a site and Compare
   (doc/polish.md, C11). */
.tl details.pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font: 600 13px var(--font); white-space: nowrap; }
.tl details.pick > summary::-webkit-details-marker { display: none; }
.tl details.pick > summary.on, .tl details.pick[open] > summary { background: var(--raised); color: var(--text); }
.tl details.pick > .pop { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: min(280px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); }
.tl details.pick.left > .pop { right: auto; left: 0; }

/* A figure's heading that sorts its table. */
.tl th a.sort { color: inherit; text-decoration: none; }
.tl th a.sort:hover { color: var(--text); text-decoration: underline; }
.tl .input.sm { height: 32px; font-size: 13px; }

/* On a narrow screen the small form is part of the page: under its
   control, as wide as there is room, where it cannot be cut off. */
@media (max-width: 560px) {
  .tl details.pick[open] { flex: 1 1 100%; }
  .tl details.pick > .pop, .tl details.pick.left > .pop { position: static; width: auto; margin-top: 6px; box-shadow: none; }
}



/* The one dialog (the Dialogs board). The canvas draws `.dialog` as a
   box on a scrim; here it is the browser's own, so the scrim is its
   backdrop and a closed one takes no room. */
.tl dialog.dialog { color: var(--text); margin: auto; max-width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.tl dialog.dialog:not([open]) { display: none; }
.tl dialog.dialog::backdrop { background: rgba(4, 10, 12, 0.62); }
.tl dialog.dialog.danger { border-color: var(--alert); }
.tl dialog.dialog h2 { font-size: 20px; }

/* What is said after the fact: a few words at the foot of the page. */
.tl .said { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 32px); pointer-events: none; }
.tl .said > .chip { pointer-events: auto; height: auto; min-height: 40px; padding: 6px 12px; box-shadow: var(--shadow); white-space: normal; }
.tl .said > .chip.bad { border-color: var(--alert); }
.tl .said > .chip .btn { height: 26px; padding: 0 8px; }

/* The row the keys are on (`j`, `k`): the one `Enter`, `f` and `x` act on. */
.tl table.keys tr.sel > td { background: var(--raised); }
.tl table.keys tr.sel > td:first-child { box-shadow: inset 2px 0 0 var(--shore); }

/* A chart can take the focus, for its keys, and be read as a table. */
.tl .plotbox:focus-visible { outline: 2px solid var(--shore); outline-offset: 2px; }
.tl details.astable > summary { cursor: pointer; width: fit-content; }
.tl details.astable[open] > summary { margin-bottom: 8px; }

/* The palette (the Keys board): the dialog, with a line to type in and a
   list under it. */
.tl dialog.dialog.palette { padding: 0; gap: 0; max-width: min(560px, calc(100vw - 32px)); margin-top: 12vh; }
.tl dialog.dialog.palette .phead { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tl dialog.dialog.palette .phead .input { border: 0; background: transparent; height: 32px; padding: 0; font-size: 17px; }
.tl dialog.dialog.palette .phead .input:focus { outline: none; }
.tl dialog.dialog.palette .phead:focus-within { box-shadow: inset 0 -2px 0 var(--shore); }
.tl dialog.dialog.palette .plist { padding: 8px; gap: 2px; max-height: min(52vh, 420px); overflow: auto; }
.tl dialog.dialog.palette .plist .eyebrow { padding: 10px 10px 4px; }
.tl dialog.dialog.palette .pfoot { padding: 10px 16px; border-top: 1px solid var(--line); }

/* The frame a stored copy of a page is shown in (the Overlay board's
   "shot"): the page as it is, on white, however the app is themed. */
.tl .shotframe { background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; width: 100%; }
.tl .shotframe iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #FFFFFF; }


/* Code in a card like the landing page's terminal (doc/sign-in-services.md,
   B.4, and the Install screen): dark in either theme, with its own colours,
   so it reads the same inside the public pages and inside the app. */
.tl .tk-code { --tk-deep: #06111F; --tk-deep-2: #0C1A2C; --tk-ink: #E4ECF6; --tk-mute: #9DB0C7; --tk-rule: #1B2E46; --tk-shore: #E6B566; --tk-water: #8FB5F6; background: var(--tk-deep-2); border: 1px solid var(--tk-rule); border-radius: 16px; overflow: hidden; min-width: 0; }
.tl .tk-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--tk-rule); }
.tl .tk-code-cap { font: 500 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--tk-mute); }
.tl .tk-copy { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--tk-ink); color: var(--tk-deep); font: 600 13px/1 var(--font); cursor: pointer; }
.tl .tk-code .tk-pre { margin: 0; padding: 18px 22px 20px; background: transparent; border: 0; border-radius: 0; font: 400 15px/1.75 var(--mono); color: var(--tk-ink); overflow-x: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl .tk-code .tk-pre.sm { font-size: 13.5px; line-height: 1.7; }
.tl .tk-code .tk-p, .tl .tk-code .tk-c { color: var(--tk-mute); }
.tl .tk-code .tk-c { font-style: italic; }
.tl .tk-code .tk-tag, .tl .tk-code .tk-kw { color: var(--tk-water); }
.tl .tk-code .tk-at { color: var(--tk-ink); }
.tl .tk-code .tk-v { color: var(--tk-shore); }
.tl .tk-tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--tk-rule); }
.tl .tk-tabs label { position: relative; cursor: pointer; color: var(--tk-mute); font: 500 13px/1 var(--mono); padding: 10px 14px 12px; border-radius: 10px 10px 0 0; white-space: nowrap; }
.tl .tk-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tl .tk-tabs label:has(input:checked) { color: var(--tk-ink); background: var(--tk-deep); box-shadow: inset 0 -2px 0 var(--tk-water); }
.tl .tk-tabs label:has(input:focus-visible) { outline: 2px solid var(--tk-water); outline-offset: -2px; }
/* One server's part at a time, as the tabs say, with no script. */
.tl .tk-servers:has(input[value="caddy"]:checked) .tk-nginx,
.tl .tk-servers:not(:has(input[value="caddy"]:checked)) .tk-caddy { display: none; }
/* "Is your site behind nginx or Caddy?": folded, not assumed. */
.tl .tk-fold { border: 1px solid var(--pb-rule, var(--line)); border-radius: 12px; background: var(--pb-surf, var(--surface)); min-width: 0; }
.tl .tk-fold summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; }
.tl .tk-fold summary::-webkit-details-marker { display: none; }
.tl .tk-fold summary > span { display: flex; flex-direction: column; gap: 2px; }
.tl .tk-fold summary b { font-weight: 600; font-size: 15px; }
.tl .tk-fold summary svg { width: 20px; height: 20px; flex: none; color: var(--pb-ink-3, var(--text-3)); transition: transform .2s; }
.tl .tk-fold[open] summary svg { transform: rotate(180deg); }
.tl .tk-fold-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
/* The line from tidekeeper, or from the site's own domain: one card, two
   tabs, answered by the stylesheet (doc/polish.md, C13). */
.tl .tk-ways:has(input[name="tk-from"][value="own"]:checked) .tk-from-direct,
.tl .tk-ways:not(:has(input[name="tk-from"][value="own"]:checked)) .tk-from-own { display: none; }
.tl .tk-from-own .tk-servers .tk-tabs { border-top: 1px solid var(--tk-rule); }
/* The steps, without numbers: a dot each on a rail, hollow for what only
   some sites need (the board "C13 · chosen"). */
.tl .tk-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl .tk-rail > li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 0 28px 40px; min-width: 0; }
.tl .tk-rail > li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.tl .tk-rail > li.opt::before { background: var(--surface); border: 2px solid var(--line-2); width: 8px; height: 8px; }
.tl .tk-rail > li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.tl .tk-rail > li.opt { padding-bottom: 16px; }
.tl .tk-step-t { font: 600 18px/1.3 var(--font); margin: 0; }
.tl .tk-plain { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* What the script sends, by when it is sent. */
.tl .tk-fields-g { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 4px; }
.tl .tk-fields { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 10px; margin: 0; }
.tl .tk-fields dt { display: inline-grid; place-items: center; height: 24px; border-radius: 7px; background: var(--raised); font: 600 13.5px var(--mono); }
.tl .tk-fields dd { margin: 0; font-size: 14px; color: var(--text-2); padding-top: 2px; }

/* Finish setting up (doc/sign-in-services.md, C): a card in the corner,
   after Stripe's setup guide. */
.tl .tk-guide { position: fixed; right: 28px; bottom: 28px; width: 372px; max-width: calc(100% - 32px); max-height: calc(100vh - 56px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 44px rgba(10, 18, 32, .16), 0 2px 6px rgba(10, 18, 32, .06); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; z-index: 30; }
.tl .tk-guide[hidden] { display: none; }
/* A place for a message with nothing in it is `hidden`, and `.note` sets a
   display of its own: without this the empty box showed as a red bar
   (doc/polish.md, B2). */
.tl .note[hidden] { display: none; }
@media (max-width: 520px) { .tl .tk-guide { right: 16px; left: 16px; bottom: 16px; width: auto; max-width: none; } }
.tl .tk-guide-head { display: flex; align-items: center; gap: 8px; }
.tl .tk-guide-head h2 { margin: 0; font: 600 16px/1.2 var(--font); color: var(--text); flex: 1 1 auto; }
.tl .tk-guide-head .n { font: 500 13px/1 var(--mono); color: var(--text-3); }
.tl .tk-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.tl .tk-icon:hover { background: var(--raised); color: var(--text); }
.tl .tk-icon svg { width: 18px; height: 18px; }
.tl .tk-prog { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tl .tk-prog i { display: block; height: 100%; background: var(--shore); border-radius: 3px; }
.tl .tk-next { margin: 0; font-size: 14.5px; color: var(--text-2); }
.tl .tk-next a { color: var(--shore-text); font-weight: 600; text-decoration: none; }
.tl .tk-next a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl .tk-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tl .tk-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; }
.tl .tk-list i { display: block; line-height: 0; }
.tl .tk-list svg { width: 20px; height: 20px; margin-top: 1px; }
.tl .tk-list .done { color: var(--text-3); }
.tl .tk-list .done { grid-template-columns: 22px minmax(0, 1fr) auto; }
.tl .tk-list .done .l { text-decoration: line-through; text-decoration-color: var(--line-2); }
.tl .tk-list .done em { font-style: normal; }
.tl .tk-list .tk-later { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.tl .tk-list .done svg { color: var(--shore); }
.tl .tk-list .now { background: var(--raised); padding: 12px 10px 14px; }
.tl .tk-list .now b { display: block; font-weight: 600; color: var(--text); }
.tl .tk-list .now p { margin: 4px 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.tl .tk-list .now svg { color: var(--shore); }
.tl .tk-list .wait { color: var(--text-3); }
.tl .tk-list .wait em { display: block; font-style: normal; font-size: 12.5px; }
.tl .tk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); padding: 2px 2px 0; }
.tl .tk-empty { background: transparent; border: 1px dashed var(--line-2); border-radius: 8px; }

/* How you sign in, under Settings (D2 to D5). */
.tl .tk-part { display: flex; flex-direction: column; gap: 12px; }
.tl .tk-svc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl .tk-svc li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tl .tk-svc li:first-child { border-top: 0; }
.tl .tk-svc svg { width: 20px; height: 20px; }
.tl .tk-svc b { display: block; font-weight: 600; }
.tl .tk-svc span.small { color: var(--text-2); }
.tl .tk-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.tl .tk-row .field { flex: 1 1 220px; }
.tl .tk-method { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.tl .tk-method > .head b { font-weight: 600; }
.tl .tk-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl .tk-keys li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.tl .tk-keys li:first-child { border-top: 0; }
.tl .tk-keys svg { width: 20px; height: 20px; color: var(--text-2); }
.tl .tk-keys b { display: block; font-weight: 600; }
.tl .tk-acts { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 520px) { .tl .tk-svc li, .tl .tk-keys li { grid-template-columns: 24px minmax(0, 1fr); } .tl .tk-svc li > :last-child, .tl .tk-keys li > :last-child { grid-column: 2; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .tl .tk-fold summary svg { transition: none; } }

/* The time zone picker (doc/polish.md, C1): one field that searches, its
   list under it, the browser's own zone first. */
.tl .tz { position: relative; }
.tl .tz-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); }
.tl .tz-g { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 10px 10px 6px; }
.tl .tz-o { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.tl .tz-o.on, .tl .tz-o:hover { background: var(--raised); }
.tl .tz-o b { font-weight: 600; }
.tl .tz-off { margin-left: auto; font: 500 13px var(--mono); color: var(--text-3); }
/* Add a site, once the site is added: its line, done, above the steps. */
.tl .tk-made { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 0 0 22px 40px; }
.tl .tk-made::before { content: "✓"; position: absolute; left: 3px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 11px/18px var(--font); text-align: center; }
.tl .tk-made a { margin-left: auto; }
.tl .tk-go { border-top: 1px solid var(--line); padding-top: 16px; }

/* A field in the look she chose (doc/polish.md, B1): the label with a
   place for what is wrong at its end, the input, and one line under it for
   the hint or the reason. Every place is there either way, so saying
   something moves nothing; the line above the button keeps its height too. */
.tl .tk-f-lb { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 22px; }
.tl .tk-f-lb label { margin: 0; }
.tl .tk-f-st { font-size: 13.5px; font-weight: 600; color: var(--alert-text); white-space: nowrap; }
.tl .tk-f.bad label { color: var(--alert-text); }
.tl .tk-f.bad .input { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }
.tl .tk-f-line { margin: 6px 0 0; min-height: 1.35em; font-size: 13.5px; line-height: 1.35; color: var(--text-3); }
.tl .tk-f.bad .tk-f-line { color: var(--alert-text); }
.tl .tk-f-count { margin: 0; min-height: 1.4em; text-align: center; font-weight: 600; font-size: 15px; color: var(--alert-text); }

/* A figure's tile: pressed to draw its figure, by a button laid over it, so
   the ? beside Visitors can be beside it and not inside a button
   (doc/polish.md, C2). */
.tl .kpi { position: relative; }
.tl .kpi-hit { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: 0; background: none; cursor: pointer; }
.tl .kpi-hit:focus-visible { outline: 2px solid var(--water); outline-offset: -2px; }
.tl .kpi:has(> .kpi-hit:hover) .k { color: var(--text); }
.tl .kpi .k { display: inline-flex; align-items: center; gap: 7px; }
.tl .kpis:has(details.q[open]) { overflow: visible; }
.tl details.q { position: relative; z-index: 2; display: inline-block; }
.tl details.q > summary { list-style: none; width: 20px; height: 20px; border-radius: 50%; border: 1.4px solid var(--line-2); display: grid; place-items: center; cursor: pointer; color: var(--text-2); background: var(--surface); }
.tl details.q > summary::-webkit-details-marker { display: none; }
.tl details.q > summary svg { width: 14px; height: 14px; display: block; }
.tl details.q[open] > summary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tl details.q .q-says { position: absolute; left: -10px; top: 28px; width: 300px; max-width: 80vw; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font: 400 14px/1.45 var(--font); box-shadow: var(--shadow); z-index: 5; }
.tl .th-q { display: inline-flex; align-items: center; gap: 6px; }
.tl th details.q .q-says { left: auto; right: -10px; text-align: left; text-transform: none; letter-spacing: 0; }
.tl .scroll:has(details.q[open]) { overflow: visible; }
/* How precise places are (doc/polish.md, C7): a line for each. */
.tl .precise-row { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tl .precise .head + .precise-row { border-top: 0; }
.tl .precise .note { margin-top: 10px; }
@media (max-width: 640px) { .tl .precise-row { grid-template-columns: 1fr auto; } .tl .precise-row > .t2 { grid-column: 1 / -1; } }
/* No plan yet, and the plans to choose (doc/polish.md, C4). */
.tl .no-plan { background: var(--shore-wash); border-color: color-mix(in srgb, var(--shore) 35%, var(--line)); }
.tl .no-plan h2 { font: 500 24px/1.2 var(--serif); margin: 0; }
.tl .plans .plan { display: flex; flex-direction: column; gap: 10px; }
.tl .plans .plan.fit { box-shadow: inset 0 0 0 2px var(--ink); }
.tl .plans .price { font: 400 34px/1 var(--serif); }
.tl .plan-has { margin: 4px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--text-2); }
.tl .plans .plan .btn { margin-top: auto; }
/* Import (doc/polish.md, C15): one column of numbered steps, the ones
   behind folded to a line, the check's answer before anything is written;
   what was imported and the export beside it (the board "C15 · chosen"). */
.tl .linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl .linkish:hover { color: var(--text); }
.tl .imp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.tl .imp-steps { padding: 28px 28px 6px; }
.tl .imp-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
.tl .imp-step .rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tl .imp-step .rail::after { content: ""; flex: 1; width: 2px; min-height: 12px; background: var(--line); border-radius: 2px; }
.tl .imp-step:last-child .rail::after { display: none; }
.tl .imp-step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--font); background: var(--ink); color: var(--on-ink); flex: none; }
.tl .imp-step .n.next { background: var(--surface); color: var(--text); border: 1.6px solid var(--line-2); }
.tl .imp-body { min-width: 0; padding-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.tl .imp-body > [hidden] { display: none; }
.tl .imp-fold { display: flex; align-items: center; gap: 14px; padding-top: 4px; min-width: 0; }
.tl .imp-fold b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .imp-k { width: 90px; flex: none; }
.tl .imp-step .st-t { font-size: 18px; font-weight: 600; margin: 3px 0 2px; }
.tl .imp-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tl .imp-src { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
.tl .imp-src input { margin-top: 3px; accent-color: var(--ink); }
.tl .imp-src.on { box-shadow: inset 0 0 0 1.5px var(--ink); border-color: var(--ink); }
.tl .imp-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 20px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--raised); cursor: pointer; }
.tl .imp-drop.has { border-style: solid; background: var(--surface); }
.tl .imp-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl .imp-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tl .imp-drop b { overflow-wrap: anywhere; }
.tl .imp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 4px; }
.tl .imp-facts > div { padding: 14px 16px; border-left: 1px solid var(--line); background: var(--surface); }
.tl .imp-facts > div:first-child { border-left: 0; }
.tl .imp-facts .k { font-size: 13px; color: var(--text-3); }
.tl .imp-facts .v { font: 400 20px/1.3 var(--serif); margin-top: 2px; }
.tl .imp-chart { margin-top: 8px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.tl .imp-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 10px 4px 0; border-bottom: 1px solid var(--line); }
.tl .imp-bars > div { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; min-width: 0; }
.tl .imp-bars i { display: block; flex: 1; border-radius: 4px 4px 0 0; }
.tl .imp-bars .im { background: repeating-linear-gradient(135deg, var(--water-wash) 0 6px, color-mix(in srgb, var(--water) 30%, transparent) 6px 12px); }
.tl .imp-bars .co { background: var(--shore); }
.tl .imp-lines { margin-top: 8px; }
.tl .imp-lines .ln { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.tl .imp-lines .ln.h { border-top: 0; color: var(--text-3); font-size: 13px; }
.tl .imp-found { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--raised); border-radius: 10px; font-size: 14px; color: var(--text-2); }
.tl .imp-found .ico { flex: none; color: var(--text-3); margin-top: 1px; }
.tl .imp-go { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.tl .imp-side { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.tl .imp-side h2 { font-size: 15px; font-weight: 600; margin: 0; }
.tl .imp-side p { margin: 0; }
.tl .imp-done { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.tl .imp-done li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.tl .imp-done .mono { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .tl .imp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tl .imp-steps { padding: 20px 16px 4px; }
  .tl .imp-step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .tl .imp-k { width: auto; }
  .tl .imp-facts { grid-template-columns: minmax(0, 1fr); }
  .tl .imp-facts > div { border-left: 0; border-top: 1px solid var(--line); }
  .tl .imp-facts > div:first-child { border-top: 0; }
  .tl .imp-lines .ln { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  .tl .imp-lines .ln > :last-child { grid-column: 1 / -1; }
  .tl .imp-lines .ln.h > :last-child { display: none; }
}
/* The documentation in the app's frame, for someone signed in
   (doc/polish.md, C3): the public docs' own parts, in the app's colours,
   without the public page around them. */
.tl .pb.tk-docs {
  --pb-paper: var(--bg); --pb-mist: var(--raised); --pb-surf: var(--surface);
  --pb-ink: var(--text); --pb-ink-2: var(--text-2); --pb-ink-3: var(--text-3); --pb-rule: var(--line);
  --pb-shore: var(--shore-text); --pb-shore-wash: var(--shore-wash);
  --pb-water: var(--water-text); --pb-water-wash: var(--water-wash); --pb-good: var(--live-text);
  --pb-btn: var(--ink); --pb-btn-ink: var(--on-ink); --pb-shadow: var(--shadow);
  background: none; min-height: 0; display: block; color: var(--text); font-size: 16px;
}
body.tl:has(.pb.tk-docs) { background: var(--bg); }
.tl .tk-docs .pb-docs { grid-template-columns: 220px minmax(0, 1fr) 180px; gap: 16px 32px; padding: 0 0 48px; }
.tl .tk-docs .pb-side, .tl .tk-docs .pb-toc { top: 24px; }
.tl .tk-docs .pb-side a[aria-current="page"] { background: var(--surface); }
.tl .tk-docs .pb-doc h1 { font-size: clamp(30px, 3.4vw, 40px); }
/* With the app's sidebar beside it the page has less room: On this page
   leaves first, then the side list goes over the page, folded. */
@media (max-width: 1400px) {
  .tl .tk-docs .pb-docs { grid-template-columns: 210px minmax(0, 1fr); }
  .tl .tk-docs .pb-toc { display: none; }
}
@media (max-width: 1180px) {
  .tl .tk-docs .pb-docs { grid-template-columns: minmax(0, 1fr); }
  .tl .tk-docs .pb-side { position: static; max-height: none; overflow: visible; }
}
/* An endpoint's question with curl or in JavaScript, as the tabs say. */
.tl .tk-langs:has(input[value="js"]:checked) .tk-curl,
.tl .tk-langs:not(:has(input[value="js"]:checked)) .tk-js { display: none; }
/* Read more on API tokens (doc/polish.md, C3). */
.tl .read-more a { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.tl .read-more a:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* Settings' actions wrap, and under 640 take a line of their own. */
.tl .settings-act { flex-wrap: wrap; min-width: 0; justify-content: flex-end; padding-bottom: 6px; }
@media (max-width: 640px) {
  .tl .settings-tabs > .sp { display: none; }
  .tl .settings-act { flex: 1 1 100%; justify-content: flex-start; padding-top: 6px; }
}
/* A code card's tabs wrap where the card is narrow. */
.tl .tk-tabs { flex-wrap: wrap; }
/* A long site name breaks in Needs attention's table, so it fits a phone. */
.tl table.attn-sites td:first-child { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .tl table.attn-sites .state { white-space: normal; align-items: flex-start; }
  .tl table.attn-sites .state .dot { flex: none; margin-top: 6px; }
  .tl table.attn-sites th, .tl table.attn-sites td { padding-left: 8px; padding-right: 8px; }
}
/* The site switcher (doc/polish.md, C12; the board "SwitcherA"): the
   site's name opens a list of the account's sites. Fixed, as both of the
   sidebar's layouts clip what reaches out of them. */
.tl .site-pick > summary { list-style: none; }
.tl .site-pick > summary::-webkit-details-marker { display: none; }
.tl .site-pick > summary .chev { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--text-3); }
.tl .site-pick > summary .chev svg { width: 16px; height: 16px; }
.tl .site-pick[open] > summary { border-color: var(--water); box-shadow: 0 0 0 3px var(--water-wash); }
.tl .site-pick > .pop { position: fixed; z-index: 40; left: 14px; top: 118px; width: 320px; max-height: calc(100dvh - 140px); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; white-space: normal; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); }
.tl .site-pick .pop .input { height: 38px; margin-bottom: 6px; }
.tl .site-pick .opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 15px; }
.tl .site-pick .opt[hidden] { display: none; }
.tl .site-pick .opt:hover, .tl .site-pick .opt:focus-visible { background: var(--raised); outline: none; }
.tl .site-pick .opt.cur { background: var(--raised); font-weight: 600; }
.tl .site-pick .opt .ico { display: inline-flex; width: 18px; height: 18px; flex: none; color: var(--text-2); }
.tl .site-pick .opt .ico svg { width: 18px; height: 18px; }
.tl .site-pick .opt .fav { width: 20px; height: 20px; border-radius: 5px; flex: none; object-fit: contain; margin: 0; }
.tl .site-pick .opt .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .site-pick .opt .meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.tl .site-pick .sep { border-top: 1px solid var(--line); margin: 6px 4px; }
.tl .site-pick .hint { margin: 0; padding: 4px 10px 2px; font-size: 13px; color: var(--text-3); }
@media (max-width: 900px) {
  .tl .site-pick > .pop { top: 64px; left: 12px; right: 12px; width: auto; }
}
/* Icons, as the chosen boards draw them (doc/polish.md, C9): plain lines,
   18 px. An element names its icon (data-i); the icon is a mask in the
   element's own colour, so the browser half carries none of them. */
.tl .side .nav[data-i]::after, .tl .tab[data-i]::before, .tl .btn[data-i]::before, .tl .read-more a[data-i]::before, .tl .ic[data-i]::before, .tl .tk-f-st[data-i]::before, .tl .tz-o[data-i]::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
/* The sidebar's: before the words, muted, darker for the page it is on. */
.tl .side .nav[data-i]::after { order: -1; background: var(--text-3); }
.tl .side .nav.on[data-i]::after { background: var(--text); }
.tl .btn.sm[data-i]::before { width: 16px; height: 16px; }
/* Tokens' Read more: the icon beside the name and its line. */
.tl .read-more a[data-i] { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.tl .read-more a[data-i]::before { grid-row: 1 / span 2; margin-top: 2px; color: var(--text-2); }
.tl .read-more a[data-i] > * { grid-column: 2; }
/* A tile holding an icon: No plan yet (PlanA), Lately (AttentionB). */
.tl .tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--shore-text); }
.tl .tile.ic[data-i]::before { width: 22px; height: 22px; }
.tl .tile.ok { width: 40px; height: 40px; border-radius: 10px; background: var(--live-wash); color: var(--live-text); }
.tl .tile.ok.ic[data-i]::before { width: 18px; height: 18px; }
/* The card is a column; this one is a row, the tile then the words (it
   was centred, with the tile missing). */
.tl .card.no-plan { flex-direction: row; align-items: center; gap: 22px; }
/* No channel yet (SettingsB). */
.tl .empty-state { display: flex; gap: 16px; align-items: center; padding: 12px; }
.tl .bubble { width: 44px; height: 44px; border-radius: 12px; background: var(--raised); display: grid; place-items: center; color: var(--text-2); flex: none; }
/* What is never kept (PreciseA). */
.tl .note.ic[data-i]::before { margin-top: 1px; color: var(--text-2); }
/* A field that still needs someone, and the count of them (FieldsB). */
.tl .tk-f-st[data-i] { display: inline-flex; align-items: center; gap: 6px; }
.tl .tk-f-st[data-i]::before { width: 15px; height: 15px; }
.tl .tk-f-count[role="alert"] { display: flex; justify-content: center; align-items: center; gap: 8px; }
.tl .tk-f-count[role="alert"]::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--i-alert) center / 100% 100% no-repeat; mask: var(--i-alert) center / 100% 100% no-repeat; }
/* The time zone's field searches (TimeZoneA); the browser's own zone has a pin. */
.tl .tz::before { content: ""; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--text-3); -webkit-mask: var(--i-search) center / 100% 100% no-repeat; mask: var(--i-search) center / 100% 100% no-repeat; pointer-events: none; }
.tl .tz > .input { padding-left: 40px; }
.tl .tz-o[data-i]::before { color: var(--text-3); }
.tl .plan-has li::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; background: var(--live); -webkit-mask: var(--i-check) center / 100% 100% no-repeat; mask: var(--i-check) center / 100% 100% no-repeat; }

.tl { --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 8v5M12 16.5v.01'/%3E%3C/svg%3E"); --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E"); --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.tl [data-i="sites"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z'/%3E%3C/svg%3E"); }
.tl [data-i="stores"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6c0-1.7 3.1-3 7-3s7 1.3 7 3-3.1 3-7 3-7-1.3-7-3zM5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E"); }
.tl [data-i="admin"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9zM12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E"); }
.tl [data-i="attention"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.tl [data-i="settings"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9M15 5v4M9 15v4'/%3E%3C/svg%3E"); }
.tl [data-i="docs"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 21V5M8 7h7'/%3E%3C/svg%3E"); }
.tl [data-i="keys"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM7 11h.01M11 11h.01M15 11h.01M8 14h8'/%3E%3C/svg%3E"); }
.tl [data-i="overview"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5M4 19h16M7 15l4-4 3 3 5-6'/%3E%3C/svg%3E"); }
.tl [data-i="pages"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7zM14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E"); }
.tl [data-i="sources"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M12 6h6l2 2-2 2h-6M12 13H6l-2 2 2 2h6'/%3E%3C/svg%3E"); }
.tl [data-i="places"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9'/%3E%3C/svg%3E"); }
.tl [data-i="goals"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 11.5v1'/%3E%3C/svg%3E"); }
.tl [data-i="realtime"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6'/%3E%3C/svg%3E"); }
.tl [data-i="bots"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12v11H6zM12 4v4M9.5 12.5h.01M14.5 12.5h.01M10 16h4M3.5 12v3M20.5 12v3'/%3E%3C/svg%3E"); }
.tl [data-i="overlay"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h9l5 5v6M14 3v5h5M5 3v18h7M14 13l7 3-3 1-1 3z'/%3E%3C/svg%3E"); }
.tl [data-i="history"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.5-5.8M4 4v4h4M12 8v4l3 2'/%3E%3C/svg%3E"); }
.tl [data-i="visitors"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM4 21c1-4 4.5-6 8-6s7 2 8 6'/%3E%3C/svg%3E"); }
.tl [data-i="funnels"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8z'/%3E%3C/svg%3E"); }
.tl [data-i="retention"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l3 3-3 3M4 11V9a4 4 0 0 1 4-4h12M7 22l-3-3 3-3M20 13v2a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E"); }
.tl [data-i="paths"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM18 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 17h7a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h7'/%3E%3C/svg%3E"); }
.tl [data-i="revenue"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM15 9.5c-.5-1-1.6-1.5-3-1.5-1.7 0-3 .9-3 2s1.3 1.8 3 2 3 .9 3 2-1.3 2-3 2c-1.4 0-2.5-.5-3-1.5M12 6.5v11'/%3E%3C/svg%3E"); }
.tl [data-i="consent"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6zM9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.tl [data-i="workspace"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-3 8 3v16M9 21v-4h6v4M8 9h.01M12 9h.01M16 9h.01M8 13h.01M12 13h.01M16 13h.01'/%3E%3C/svg%3E"); }
.tl [data-i="site"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v14H3zM3 9h18M6.5 7h.01M9.5 7h.01'/%3E%3C/svg%3E"); }
.tl [data-i="share"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E"); }
.tl [data-i="team"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM2.5 20c.7-3.5 3.4-5.5 6.5-5.5s5.8 2 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 6.5M18 14.8c1.8.7 3 2.5 3.5 5.2'/%3E%3C/svg%3E"); }
.tl [data-i="alerts"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7zM10 13l11-10'/%3E%3C/svg%3E"); }
.tl [data-i="tokens"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM10.5 12H21M18 12v3M21 12v2.5'/%3E%3C/svg%3E"); }
.tl [data-i="plan"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 10h18M7 15h3'/%3E%3C/svg%3E"); }
.tl [data-i="plus"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.tl [data-i="cli"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-5-6-5M12 19h8'/%3E%3C/svg%3E"); }
.tl [data-i="download"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.tl [data-i="check"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.tl [data-i="shield"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3C/svg%3E"); }
.tl [data-i="alert"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 8v5M12 16.5v.01'/%3E%3C/svg%3E"); }
.tl [data-i="pin"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11zM12 8v4'/%3E%3C/svg%3E"); }
/* A card that is a row: words one side, its control the other. `.card`
   comes after `.row` and made it a column, centred (the second step on
   Team, No plan yet; 18 October). */
.tl .card.row { flex-direction: row; }

/* The plan's banner above every screen, and a feature's place where the
   plan lacks it (doc/pricing-spec.md §8, the design's second board). */
.tl .planbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 16px 20px; border-radius: 16px; margin-bottom: 20px; }
.tl .planbar.near { border: 1px solid var(--shore); background: var(--shore-wash); }
.tl .planbar.near svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--shore-text); stroke-width: 2; stroke-linecap: round; }
.tl .planbar.dark { background: var(--ink); color: var(--on-ink); }
.tl .planbar-words { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl .planbar.near .planbar-words span { color: var(--shore-text); }
.tl .planbar.dark .planbar-words span { opacity: .78; }
.tl .planbar-days { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--on-ink) 18%, transparent); }
.tl .planbar-days b { font: 500 24px/1 var(--display, Georgia, serif); color: var(--shore); }
.tl .planbar-days span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.tl .planbar .btn { min-height: 44px; }
.tl .planbar.dark .btn { background: var(--on-ink); color: var(--ink); border-color: transparent; }
.tl .lacks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; margin-bottom: 20px; border: 1.5px solid var(--water); border-radius: 14px; background: var(--water-wash); }
/* The Plan screen's meter marks where the first word comes (80%), and its
   two ways up (doc/pricing-spec.md §8). */
.tl .meter { position: relative; }
.tl .meter .mark80 { position: absolute; left: 80%; top: -6px; bottom: -6px; width: 2px; background: var(--text); opacity: .35; }
.tl .ways-up { scroll-margin-top: 24px; }
.tl .ways-up .way .lbl { color: var(--shore-text); letter-spacing: .06em; text-transform: uppercase; }
.tl .ways-up .way.above { border: 1.5px solid var(--water); }
.tl .ways-up .way.above .lbl { color: var(--water-text); }

/* A phone (the board "Phone", doc/design-gaps.md 3.3): the head is the
   mark, the site and a badge for what needs attention; the sections are a
   bar at the foot, the rest under More. On a desk neither shows. */
.tl .tabbar, .tl .att-badge { display: none; }
@media (max-width: 760px) {
  .tl .mbar .att-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); text-decoration: none; font: 600 14px var(--font); }
  .tl .att-badge[data-i]::before { content: ""; width: 18px; height: 18px; background: var(--text-2); -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
  .tl .tabbar { display: flex; position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; gap: 2px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .tl .tabbar > a, .tl .tabbar > details { flex: 1 1 0; min-width: 0; }
  .tl .tabbar > a, .tl .tabbar summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; border-radius: 8px; color: var(--text-2); text-decoration: none; font: 500 12.5px var(--font); list-style: none; cursor: pointer; }
  .tl .tabbar summary::-webkit-details-marker { display: none; }
  .tl .tabbar > a.on, .tl .tabbar summary.on, .tl .tab-more[open] > summary { color: var(--text); font-weight: 600; }
  .tl .tabbar > a[data-i]::before, .tl .tabbar summary[data-i]::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
  .tl .tab-more { position: relative; }
  .tl .tab-more .more-list { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 18px 44px rgba(10, 18, 32, .18); }
  .tl .tab-more .more-list a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
  .tl .tab-more .more-list a.on { background: var(--raised); font-weight: 600; }
  .tl .tab-more .more-list a[data-i]::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--text-3); -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
  /* Room under the page for the bar, and for the setup card above it. */
  .tl .main { padding-bottom: 96px; }
  .tl .tk-guide { bottom: 84px; }
}
.tl [data-i="more"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01'/%3E%3C/svg%3E"); }
/* The overview on a phone leads with the one figure, large, and the rest
   small beneath it (the board "Phone"). Only the six figures of a site's
   overview: other screens keep their two columns. */
@media (max-width: 760px) {
  .tl .kpis:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi:first-child { grid-column: 1 / -1; }
  .tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi:first-child .v { font-size: 52px; letter-spacing: -.03em; }
  .tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi:not(:first-child) { padding: 12px; }
  .tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi:not(:first-child) .v { font-size: 20px; }
  .tl .kpis:has(> .kpi:nth-child(6):last-child) > .kpi:not(:first-child) .k { font-size: 12.5px; }
}

/* Settings, Looks: figures in full or short, as this browser was told. */
.tl .v-short { display: none; }
[data-numbers="short"] .v-full { display: none; }
[data-numbers="short"] .v-short { display: inline; }

/* Goals reached on a page: name, visitors, share, a bar under each. */
.tl .goal-rows { display: flex; flex-direction: column; }
.tl .goal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 16px; align-items: baseline; padding: 10px 0 12px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--shore), var(--shore)) left bottom / var(--p, 0%) 2px no-repeat; }
.tl .goal-row a.b { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.tl .goal-row a.b:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .tl .goal-row { grid-template-columns: minmax(0, 1fr) auto auto; } .tl .goal-row > a.small { display: none; } }
.tl .key-formula { display: block; padding: 8px 10px; border-radius: 6px; background: var(--raised); font: 500 13px/1.4 var(--mono); color: var(--text); overflow-wrap: anywhere; }
/* A chip that is a link (Changed this week), pressed when it holds. */
.tl a.chip { color: var(--text-2); text-decoration: none; }
.tl a.chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tl .goal-filter .input { max-width: 260px; }
/* Turn on hard mode (the board "HardOn"): a done step is one line of what
   was decided, opened by Change; the step now is marked; the next wait. */
.tl details.card.step > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.tl details.card.step > summary::-webkit-details-marker { display: none; }
.tl details.card.step > summary h2 { margin: 0; }
.tl details.card.step .step-said, .tl details.card.step .step-change { display: none; }
.tl details.card.step:not([open]) .step-said { display: inline; flex: 1 1 200px; min-width: 0; }
.tl details.card.step:not([open]) .step-change { display: inline; margin-left: auto; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.tl details.card.step.now { border-top-color: var(--water); }
.tl details.card.step.next { opacity: .7; }
/* New and returning by week, as bars (the board "Visitors"). */
.tl .week-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tl .week-bar .bars { display: flex; height: 10px; gap: 2px; min-width: 0; }
.tl .week-bar .bars i { display: block; height: 100%; border-radius: 3px; }
.tl .week-bar .bars i.new { background: var(--water); }
.tl .week-bar .bars i.back { background: color-mix(in srgb, var(--water) 40%, var(--surface)); }
.tl .legend .sw.light { background: color-mix(in srgb, var(--water) 40%, var(--surface)); }
/* The 404's three hints are headed in water blue, as its board draws them. */
.tl .lost-hints .b { color: var(--water); }
/* A chip's cross, and the small field beside the chips (site settings). */
.tl .chip .chip-x { border: 0; background: none; padding: 0 0 0 6px; color: var(--text-3); cursor: pointer; font: inherit; line-height: 1; }
.tl .chip .chip-x:hover { color: var(--text); }
.tl .input.sm { height: 32px; padding: 0 10px; font-size: 13px; }
/* Install (the board "InstallB"): a fold grey with the chevron first and
   its title and line on one line; "No view yet" with its dot; "strict too"
   as a chip. */
.tl .tk-fold.inline { background: var(--bg); border-radius: 10px; }
.tl .tk-fold.inline summary { justify-content: flex-start; padding: 12px 14px; }
.tl .tk-fold.inline summary > span { display: block; flex: 1 1 0; font-size: 14px; }
.tl .tk-fold.inline summary b { font-size: 14px; }
.tl .tk-fold.inline summary svg { width: 16px; height: 16px; }
.tl .tk-fold.inline[open] summary svg { transform: rotate(90deg); }
.tl .pill.quiet { padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--raised); }
.tl .pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.tl .strict { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--raised); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
/* Off and Not kept, with a hollow mark beside them (the board "PreciseA"). */
.tl .ring { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-3); box-sizing: border-box; }
/* A long title wraps beside the period controls, which stay at the right
   (the board "Places"), rather than pushing them under it. */
@media (min-width: 900px) {
  .tl .site-head > .row:first-child { flex: 1 1 320px; min-width: 0; }
  .tl .site-head > .row:last-child { flex: none; margin-left: auto; }
}
/* Banner editor (the board "BannerEditor"): purposes as rows with Edit,
   the colours as swatches opened by Adjust. */
.tl details.purpose-row { border-top: 1px solid var(--line); padding: 10px 0; }
.tl details.purpose-row > summary, .tl details.adjust > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.tl details.purpose-row > summary::-webkit-details-marker, .tl details.adjust > summary::-webkit-details-marker { display: none; }
.tl details.purpose-row[open] > summary .btn, .tl details.adjust[open] > summary .btn { background: var(--raised); }
.tl details.purpose-row > .grid, .tl details.adjust > .grid { margin-top: 12px; }
.tl .swatch { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); }
/* "Forgot it?" beside Password's label (the board "SignIn"). */
.tl .tk-f-lb:has(.tk-f-aside) { justify-content: flex-start; }
.tl .tk-f-lb:has(.tk-f-aside) .tk-f-st { margin-left: auto; }
.tl details.card.step:not([open]) > summary h2 { font: 600 14px/1.4 var(--font); letter-spacing: 0; }
/* Compare's figures may break where a column is narrow, as its names do. */
.tl table.compare-table td { white-space: normal; overflow-wrap: anywhere; }
/* Needs attention's sites on a phone: the state and the name may wrap. */
.tl table.attn-sites td { white-space: normal; overflow-wrap: anywhere; }
.tl table.attn-sites .pill { white-space: normal; }

/* Settings B (doc/mails-settings-gaps.md §3): one Settings, its own menu
   at the left grouped by whom a setting is for, the line under each
   page's title that says whom a change reaches, and the person at the
   foot of the sidebar with the help beside them. */
.tl .side .help { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px 0; }
.tl .side .help a { font-size: 13px; color: var(--text-2); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.tl .side .help a:hover, .tl .side .help a.on { background: var(--raised); color: var(--text); }
.tl .side .me { display: flex; align-items: center; gap: 10px; padding: 8px; margin-top: 2px; border-radius: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.tl .side .me:hover, .tl .side .me.on { background: var(--raised); }
.tl .side .me .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tl .side .me .who b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .side .me .who span { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A face: the picture someone set, or their first letter on a disc. */
.tl .av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--on-ink); font: 600 13px/1 var(--font); }
.tl .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl .av.big { width: 72px; height: 72px; font-size: 28px; }

.tl .set { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }
.tl .setnav { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.tl .setnav .grp { display: flex; flex-direction: column; gap: 1px; }
.tl .setnav .gh { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 6px; }
.tl .setnav .gh .for { font: 600 11.5px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.tl .setnav .gh .nm { display: flex; align-items: center; gap: 8px; font: 500 15px/1.3 var(--serif); color: var(--text); min-width: 0; }
.tl .setnav .gh .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .setnav a.it { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 9px; color: var(--text-2); text-decoration: none; font: 500 14px var(--font); }
.tl .setnav a.it:hover { background: var(--raised); color: var(--text); }
.tl .setnav a.it.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.tl .setnav a.it .x { font-size: 12px; color: var(--text-3); font-weight: 500; }
.tl .setnav a.it .x.al { color: var(--alert-text); }
.tl .setnav a.it .nm1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .set-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tl .sethead { display: flex; flex-direction: column; gap: 10px; }
.tl .sethead .crumb2 { font-size: 13px; color: var(--text-3); }
.tl .sethead h1 { font-size: 34px; }
.tl .set-back { display: none; }
.tl .scope { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--raised); font-size: 13px; color: var(--text-2); align-self: flex-start; max-width: 100%; }
.tl .scope .ic { display: inline-flex; }
.tl .scope svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* A section of rows, one setting a row: its words left, its control right. */
.tl .sec { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.tl .sec > .sh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 4px; }
.tl .sec > .sh h2 { font: 500 20px/1.25 var(--serif); }
.tl .sec > .sh p { font-size: 13.5px; color: var(--text-2); margin-top: 3px; max-width: 560px; }
.tl .sec .rw { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 22px; border-top: 1px solid var(--line); }
.tl .sec .sh + .rw { border-top: 0; }
.tl .sec .rw .w { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tl .sec .rw .w b { font-weight: 600; font-size: 14.5px; }
.tl .sec .rw .w span { font-size: 13px; color: var(--text-3); line-height: 1.4; }
.tl .sec .rw .c { flex: none; display: flex; align-items: center; gap: 8px; }
/* The whole menu as a page of its own (/settings/all): a phone's way in. */
.tl .setnav.cards { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tl .setnav.cards .grp { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; gap: 0; }
.tl .setnav.cards .gh { padding: 12px 16px 6px; }
.tl .setnav.cards a.it { min-height: 48px; padding: 0 16px; border-radius: 0; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; }
.tl .setnav.cards a.it::after { content: "›"; color: var(--text-3); margin-left: auto; padding-left: 8px; }
.tl .setnav.cards a.it .x { margin-left: auto; }
@media (max-width: 900px) {
  /* Across the top, the person is their face; the help is in the menu. */
  .tl .side .help, .tl .side .me .who { display: none; }
  .tl .side .me { flex: none; padding: 6px; margin: 0; }
}
@media (max-width: 1080px) {
  .tl .set { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tl .set > .setnav:not(.cards) { display: none; }
  .tl .set-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; color: var(--text); text-decoration: none; align-self: flex-start; }
}
@media (max-width: 760px) {
  .tl .sethead h1 { font-size: 28px; }
  .tl .sec > .sh { padding: 14px 16px 2px; }
  .tl .sec .rw { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
}
/* A deadline put aside for the day (doc/mails-settings-gaps.md §4): one
   line, still there with its button. */
.tl .planbar.line { padding: 8px 10px 8px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); gap: 8px 14px; }
.tl .planbar.line .pip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); }
.tl .planbar.line .planbar-words b { font-weight: 600; }
.tl .planbar .later { background: none; border: 0; color: inherit; opacity: .8; font: 500 13.5px var(--font); text-decoration: underline; cursor: pointer; padding: 8px 4px; min-height: 44px; }
/* A deadline's days, as an item in Needs attention. */
.tl .att-days { flex: none; width: 54px; height: 54px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tl .att-days b { font: 500 22px/1 var(--serif); }
.tl .att-days span { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
/* Lists on a phone as the Android app has them (doc/mails-settings-gaps.md,
   5): under 600 px a table's columns are a few letters wide, so its rows
   are drawn as one card of rows instead. */
.tl .only-600 { display: none; }
@media (max-width: 600px) {
  .tl .only-600 { display: block; }
  .tl .not-600 { display: none; }
}
.tl .tk-rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tl .tk-rows li + li { border-top: 1px solid var(--line); }
.tl .tk-rows a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; color: var(--text); text-decoration: none; }
.tl .tk-rows a:active { background: var(--raised); }
.tl .tk-rl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl .tk-rl b { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .tk-rm { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .tk-rm.ok { color: var(--live-text, var(--live)); }
.tl .tk-rm.al { color: var(--alert-text); }
.tl .tk-rm .m-easy { color: var(--shore-text); }
.tl .tk-rm .m-hard { color: var(--water-text); }
.tl .tk-rs { flex: 0 1 84px; min-width: 48px; color: var(--text-2); }
.tl .tk-rs svg { width: 100%; height: 32px; display: block; }
.tl .tk-rr { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.tl .tk-rr .fig { font: 400 22px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.tl .tk-rr .chg { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.tl .tk-rr .chg.good { font-weight: 600; }
.tl .tk-rr .chg.bad { font-weight: 600; }
@media (max-width: 380px) { .tl .tk-rs { display: none; } }
/* The first screen before any site (the board "FirstRun", A): the steps to
   the first figure, the next one in ink, the others waiting. */
.tl .tk-first { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.tl .tk-first li { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px dashed var(--line-2, var(--line)); border-radius: 14px; color: var(--text-2); }
.tl .tk-first li .col { flex: 1 1 260px; min-width: 0; }
.tl .tk-first li .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font: 500 16px var(--serif); color: var(--text-3); }
.tl .tk-first li.now { border: 1px solid var(--ink); background: var(--surface); color: var(--text); }
.tl .tk-first li.now .n { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tl .tk-first li.now b { font-size: 17px; }

/* The frame (doc/look-build-spec.md R2): the logo opens the way out to the
   website, the person opens the workspaces; both are the site picker's
   kind of menu. Their entries carry their icons as the menu does. */
.tl .site-pick .opt[data-i]::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--text-2); -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
.tl .site-pick button.opt { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tl .site-pick .phead { padding: 8px 10px 4px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.tl .site-pick .opt .sub { display: block; font-size: 12px; color: var(--text-3); text-transform: capitalize; }
.tl .logo-pick > summary.logo { cursor: pointer; justify-content: space-between; width: 100%; padding: 6px 10px; border-radius: 10px; }
.tl .logo-pick > summary.logo:hover, .tl .logo-pick[open] > summary.logo { background: var(--surface); }
.tl .logo-pick > .pop { top: 64px; }
.tl .me-pick > summary.me { cursor: pointer; list-style: none; border: 1px solid var(--line); }
.tl .me-pick > summary.me .chev { margin-left: auto; color: var(--text-3); }
.tl .me-pick > .pop { top: auto; bottom: 86px; }
.tl [data-i="out"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E"); }

/* The top bar (doc/look-build-spec.md R4): the period one button with its
   menu and ‹ › beside it; Filter by what it filters; More; the filters as
   chips read as sentences; the live count as a pill. */
.tl .period { display: inline-flex; align-items: center; gap: 2px; }
.tl .period .step { display: inline-grid; place-items: center; width: 30px; height: 40px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 18px; }
.tl .period a.step:hover { background: var(--raised); color: var(--text); }
.tl details.pick > summary[data-i]::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
.tl details.pick > .menu-pop { padding: 6px; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 2px; border-radius: 14px; }
.tl .menu-pop .opt { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 14px; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.tl .menu-pop .opt[hidden] { display: none; }
.tl .menu-pop .opt:hover, .tl .menu-pop .opt:focus-visible, .tl .menu-pop .opt.cur { background: var(--raised); outline: none; }
.tl .menu-pop .opt.cur { font-weight: 600; }
.tl .menu-pop .opt .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .menu-pop .opt .meta { margin-left: auto; color: var(--text-3); font-size: 13px; flex: none; }
.tl .menu-pop .opt kbd { margin-left: auto; }
.tl .menu-pop .opt[data-i]::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--text-2); -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
.tl .menu-pop .sep { border-top: 1px solid var(--line); margin: 4px 4px; }
.tl .menu-pop details.days > summary { list-style: none; }
.tl .menu-pop details.days > summary::-webkit-details-marker { display: none; }
.tl .menu-pop details.days > form { padding: 6px 10px 10px; }
.tl .menu-pop .ops { display: flex; gap: 4px; padding: 4px 4px 6px; }
.tl .menu-pop .ops .btn { flex: 1 1 0; height: 32px; }
.tl .menu-pop .ops .btn.on { background: var(--raised); border-color: var(--line-2); }
.tl .menu-pop .find { padding: 0 4px 6px; }
.tl .menu-pop .find .input { height: 36px; }
.tl .menu-pop .back .nm { color: var(--text-2); font-weight: 600; }
.tl .more-pick > summary.iconbtn { width: 40px; padding: 0; justify-content: center; }
.tl .more-pick > summary.iconbtn::before { width: 18px; height: 18px; }
.tl .iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--text-3); text-decoration: none; }
.tl a.iconbtn:hover { background: var(--raised); color: var(--text); }
.tl a.iconbtn[data-i]::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
.tl .fchip { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface); font-size: 14px; }
.tl .fchip > * { display: inline-flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--line); color: var(--text); text-decoration: none; }
.tl .fchip > *:last-child { border-right: 0; }
.tl .fchip .k { color: var(--text-2); }
.tl .fchip .op { color: var(--text-3); font-size: 13px; }
.tl .fchip a.op:hover, .tl .fchip a.x:hover { background: var(--raised); color: var(--text); }
.tl .fchip .x { color: var(--text-3); }
.tl .live-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--live-wash); color: var(--live-text); font-size: 13px; font-weight: 500; text-decoration: none; }
.tl .live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px var(--live-wash); }
.tl .live-pill:hover { box-shadow: inset 0 0 0 1px var(--live); }
.tl [data-i="calendar"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.tl [data-i="filter"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M7 12h10M10 18h4'/%3E%3C/svg%3E"); }
.tl [data-i="bin"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }

/* The places map (doc/look-build-spec.md R7): dots on a 2° grid, as a
   chart's soundings; a country with visitors in one of four shore steps,
   and a link. */
.tl .worldmap-box { padding: 6px 4px 2px; }
.tl .worldmap { display: block; width: 100%; height: auto; }
.tl .worldmap .m0 circle { fill: var(--raised); }
.tl .worldmap .m1 circle { fill: color-mix(in srgb, var(--shore) 35%, var(--surface)); }
.tl .worldmap .m2 circle { fill: color-mix(in srgb, var(--shore) 55%, var(--surface)); }
.tl .worldmap .m3 circle { fill: color-mix(in srgb, var(--shore) 78%, var(--surface)); }
.tl .worldmap .m4 circle { fill: var(--shore); }
.tl .worldmap a:hover circle, .tl .worldmap a:focus-visible circle { fill: var(--shore-text); }
.tl .worldmap a:focus-visible { outline: none; }
.tl .map-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl .map-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tl .map-key i.m1 { background: color-mix(in srgb, var(--shore) 35%, var(--surface)); }
.tl .map-key i.m2 { background: color-mix(in srgb, var(--shore) 55%, var(--surface)); }
.tl .map-key i.m3 { background: color-mix(in srgb, var(--shore) 78%, var(--surface)); }
.tl .map-key i.m4 { background: var(--shore); }

/* Settings' three scopes as tabs over its menu (doc/look-build-spec.md
   R8): each its own mark and colour, the site's shore, the workspace's
   water, yours the live green; under them only that scope's pages. */
.tl .scope-tabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tl .scope-tab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.tl .scope-tab .ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none; }
.tl .scope-tab .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl .scope-tab .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tl .scope-tab .tx .for { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.tl .scope-tab .tx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .scope-tab.sc-site .ic { background: var(--shore-wash); color: var(--shore-text); }
.tl .scope-tab.sc-ws .ic { background: var(--water-wash); color: var(--water-text); }
.tl .scope-tab.sc-you .ic { background: var(--live-wash); color: var(--live-text); }
.tl .scope-tab:hover { background: var(--raised); }
.tl .scope-tab.on.sc-site { border-color: var(--shore); box-shadow: inset 3px 0 0 var(--shore); }
.tl .scope-tab.on.sc-ws { border-color: var(--water); box-shadow: inset 3px 0 0 var(--water); }
.tl .scope-tab.on.sc-you { border-color: var(--live); box-shadow: inset 3px 0 0 var(--live); }

/* Small screens (doc/look-build-spec.md R11): below 1024 px the sidebar is
   a drawer from the left, over the page. ☰ is a checkbox in a bar over
   the page, so the drawer opens and closes without the browser half; ×, a
   tap outside it, Escape and a swipe to the left close it. The bar keeps
   ☰, the mark and the site; the page's own head the live dot, the period
   and Filter. Closed, nothing in it can be reached by Tab. */
.tl .mbar, .tl .scrim, .tl .drawer-x { display: none; }
.tl [data-i="menu"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
@media (max-width: 1024px) {
  .tl .app { flex-direction: column; flex-wrap: nowrap; }
  .tl .mbar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 40; min-height: 56px; padding: 6px 12px; background: var(--deep); border-bottom: 1px solid var(--line); }
  .tl .burger { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; cursor: pointer; color: var(--text); }
  .tl .burger:hover { background: var(--raised); }
  .tl .burger input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .tl .burger:has(input:focus-visible) { outline: 2px solid var(--shore); outline-offset: 1px; }
  .tl .burger .ic { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
  .tl .mbar-mark { display: inline-flex; color: var(--text); }
  .tl .mbar-mark .mark { width: 24px; height: 24px; }
  .tl .mbar-site { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px var(--font); color: var(--text); text-decoration: none; }
  .tl .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; flex-direction: column; flex-wrap: nowrap; white-space: normal; border-right: 1px solid var(--line); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .tl .app:has(#tk-drawer:checked) .side { transform: none; visibility: visible; box-shadow: var(--shadow); }
  .tl .app:has(#tk-drawer:checked) .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(3, 8, 15, .55); }
  body.tl:has(#tk-drawer:checked) { overflow: hidden; }
  .tl .drawer-x { display: inline-grid; place-items: center; align-self: flex-end; width: 44px; height: 44px; flex: none; margin: -8px -4px 0 0; border-radius: 10px; cursor: pointer; color: var(--text-2); }
  .tl .drawer-x::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .tl .drawer-x:hover { background: var(--raised); color: var(--text); }
  .tl .side .att-badge { display: none; }
  .tl .side .nav { min-height: 44px; }
  .tl .main { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .tl .side { transition: none; }
}

/* The marks sheet (doc/look-review-build-spec.md V0): every picture a row
   can have, at row size and at twice it, on a dark page and a light one. */
.tl .marks-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tl .marks-panel { border-radius: 16px; border: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 22px; }
.tl .marks-group h2 { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; }
.tl .marks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; margin-top: 10px; }
.tl .marks-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; background: var(--surface); }
.tl .marks-cell .marks-row { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.tl .marks-cell .marks-row span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .marks-big .ri { width: 32px; height: 32px; }
.tl .marks-big .ri.tile i { width: 20px; height: 20px; }
.tl .marks-big .ri:not(.br):not(.mk) { width: 32px; height: 24px; }
@media (max-width: 1100px) { .tl .marks-panels { grid-template-columns: minmax(0, 1fr); } }

/* A figure's move, coloured by whether it is good
   (doc/look-review-build-spec.md V3, R1). */
.tl .chg.good, .tl .delta.good { color: var(--live-text); }
.tl .chg.bad, .tl .delta.bad { color: var(--alert-text); }
.tl .chg.flat, .tl .delta.flat { color: var(--text-3); }

/* Bots and AI (doc/look-review-build-spec.md V6): reads a day by kind,
   each kind in its own colour; under the overview's chart, its own
   series while bots are counted in. */
.tl .botdays { display: block; width: 100%; }
.tl .botdays .k-violet, .tl .sw.k-violet { fill: var(--violet); background: var(--violet); }
.tl .botdays .k-rose, .tl .sw.k-rose { fill: var(--rose); background: var(--rose); }
.tl .botdays .k-live, .tl .sw.k-live { fill: var(--live); background: var(--live); }
.tl .botdays .k-water, .tl .sw.k-water { fill: var(--water); background: var(--water); }
.tl .botdays .k-shore, .tl .sw.k-shore { fill: var(--shore); background: var(--shore); }
.tl .botdays .k-alert, .tl .sw.k-alert { fill: var(--alert); background: var(--alert); }
.tl .botdays .k-plain, .tl .sw.k-plain { fill: var(--line-2); background: var(--line-2); }
.tl .bots-under { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.tl .card .big { font: 500 28px var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.tl .pill.ok { color: var(--live-text); }
.tl .pill.alert { color: var(--alert-text); }

/* A row's second action, with its own icon: a page's overlay
   (doc/look-review-build-spec.md V8, P1). Where the row is a link, the
   link covers it and the action sits on it. */
.tl .rowact[data-i]::before { content: ""; width: 16px; height: 16px; display: block; background: currentColor; -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
.tl td.tide .rowact { margin-left: 2px; }
.tl .r.acted .cover { position: absolute; inset: 0; border-radius: 10px; z-index: 1; }
.tl .r.acted:hover { background: var(--raised); }
.tl .r.acted .rowact { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px 0; border-radius: 8px; color: var(--text-3); flex: none; }
.tl .r.acted .rowact:hover, .tl .r.acted .rowact:focus-visible { background: var(--surface); color: var(--text); }

/* The ⋮ of a table or a page's screen (V8, P2): a menu that opens
   without the browser half. */
.tl details.kebab { position: relative; }
.tl details.kebab > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--text-2); }
.tl details.kebab > summary::-webkit-details-marker { display: none; }
.tl details.kebab[open] > summary, .tl details.kebab > summary:hover { background: var(--raised); color: var(--text); }
.tl details.kebab .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 230px; display: grid; gap: 2px; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--lift); }
.tl details.kebab .menu > a, .tl details.kebab .menu > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.tl details.kebab .menu > a:hover, .tl details.kebab .menu > button:hover, .tl details.kebab .menu > a:focus-visible, .tl details.kebab .menu > button:focus-visible { background: var(--raised); }
.tl details.kebab .menu kbd { font: 500 11px var(--mono); color: var(--text-3); }
.tl details.kebab .menu .said { padding: 4px 10px; }

/* The funnel builder (doc/look-review-build-spec.md V8, P3): a card a
   step, the value offered from the site's own pages and events, each
   counted as it is chosen. */
.tl .stepcard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.tl .stepcard > .num { width: 18px; text-align: right; font-size: 13px; }
.tl .stepcard .input { width: auto; flex: none; }
.tl .stepcard .grow { flex: 1 1 160px; min-width: 0; width: auto; }
.tl .stepcard .count { flex: 1 0 100%; padding-left: 26px; }
.tl .iconbtn.sm { width: 28px; height: 28px; font-size: 14px; }
.tl .suggest { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.tl .suggest:hover, .tl .suggest:focus-visible { background: var(--raised); border-style: solid; }
.tl .meter.shore i { background: var(--shore); }

/* Events and goals (doc/look-review-build-spec.md V8, P4): families by
   the word before ":", a bucketed family as its spread, properties as
   chips, outbound by site folded. */
.tl table.events tr.family td { padding-top: 12px; }
.tl table.events tr.child td:first-child { padding-left: 28px; }
.tl table.events .spark-cell { width: 110px; }
.tl table.events .spark-cell svg { width: 100px; height: 28px; }
.tl .chip.sm { padding: 1px 8px; font-size: 12px; border-radius: 999px; background: var(--raised); color: var(--text-2); }
.tl .btn.xs { padding: 3px 9px; font-size: 12px; border-radius: 8px; }
.tl .spread { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.tl .spread .b-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; min-width: 22px; }
.tl .spread .b-col i { display: block; width: 14px; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--water); }
.tl details.fold-site > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; list-style: none; }
.tl details.fold-site > summary::-webkit-details-marker { display: none; }
.tl details.fold-site > summary:hover { background: var(--raised); }
.tl details.fold-site > summary .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl details.fold-site > div { padding: 4px 10px 10px 34px; }

/* Imports (doc/look-review-build-spec.md V9): imported days against
   counted ones on one line, and a line per import with its menu. */
.tl .imp-time { display: grid; gap: 10px; }
.tl .imp-line { position: relative; height: 18px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.tl .imp-line i { position: absolute; top: 0; bottom: 0; }
.tl .imp-line i.co { background: var(--shore); }
.tl .imp-line i.im { background: repeating-linear-gradient(135deg, var(--shore) 0 3px, color-mix(in srgb, var(--shore) 35%, var(--surface)) 3px 6px); }
.tl .imp-done li.gone { opacity: .6; }
/* All sites, across them (doc/look-review-build-spec.md V10). */
.tl .across-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.tl .across-legend .fav { width: 14px; height: 14px; }

/* A workspace's picture or its letter (doc/look-review-build-spec.md
   W1): a rounded square, where a person's is round. */
.tl .wsm, .pb .wsm { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; overflow: hidden; background: var(--raised, #EDF2F5); color: var(--text-2, #445063); font: 600 11px/1 var(--font, inherit); vertical-align: middle; }
.tl .wsm img, .pb .wsm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl .wsm.big, .pb .wsm.big { width: 64px; height: 64px; border-radius: 14px; font-size: 26px; margin-right: 0; }
.tl .who .ws { display: inline-flex; align-items: center; }

/* What says it is hidden is hidden, whatever its own display: the tabs of
   Events and goals hide their lists so, and a card's flex showed them all
   at once (found in the pictures of doc/look-review-build-spec.md). */
.tl [hidden] { display: none !important; }