/* 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: 901px) {
  .tl .side { position: sticky; top: 0; 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"]) {
    --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 navigation becomes one row across the top that
   scrolls sideways (the Phone board). It does so under 900 px, not only
   on a phone: beside a page 440 px wide the navigation took a third of a
   small window, and nothing with columns had room. */
@media (max-width: 900px) {
  /* The row is as tall as what is in it. On a page shorter than the
     window it was given half of what was left over, and the page began
     half way down. */
  .tl .app { align-content: flex-start; }
  .tl .side {
    flex: 1 1 100%; flex-direction: row; align-items: center; gap: 4px;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; white-space: nowrap;
  }
  .tl .side .side-mid, .tl .side .side-foot { display: contents; }
  .tl .side .navhead, .tl .side .tideline, .tl .side .sp, .tl .side .nav.locked { display: none; }
  .tl .side .nav, .tl .side .site, .tl .side .logo { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
  .tl .side .site { width: auto; margin: 0 4px; }
  /* With the navigation across the top, the page is the window's width
     and needs no desk's margins: at 761 px they left a table of tokens
     4 px short. */
  .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; }
.tl .heat.hours .cell { border-radius: 3px; background: color-mix(in srgb, var(--shore) calc(var(--a, 0) * 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: repeat(24, minmax(0, 1fr)); }
.tl .heat.hours.small > * { min-height: 12px; }
.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(--surface); }
@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; }
.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-2); 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-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl .tk-steps > li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 0 28px 40px; min-width: 0; }
.tl .tk-steps > li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.tl .tk-steps > li.opt::before { background: var(--surface); border: 2px solid var(--line-2); width: 8px; height: 8px; }
.tl .tk-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.tl .tk-steps > 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 .plan-has li::before { content: "✓"; color: var(--live); margin-right: 8px; }
.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 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding: 8px 0 48px; align-items: start; }
.tl .tk-docs .pb-side { top: 24px; border-left: 0; gap: 1px; }
.tl .tk-docs .pb-side a { border-left: 0; margin: 0; padding: 6px 10px; border-radius: 7px; font-size: 14.5px; }
.tl .tk-docs .pb-side a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tl .tk-docs .pb-side-g, .tl .tk-docs .pb-side-gen { padding-left: 10px; padding-right: 10px; }
.tl .tk-docs .pb-doc h1 { font-size: clamp(30px, 3.4vw, 40px); }
/* With the app's sidebar beside it, the docs' own list leaves the page too
   little room below 1180: one column, the list as a row on top. */
@media (max-width: 1180px) {
  .tl .tk-docs .pb-docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tl .tk-docs .pb-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tl .tk-docs .pb-side a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
  .tl .tk-docs .pb-side-g, .tl .tk-docs .pb-side-gen, .tl .tk-docs .pb-side a.pb-side-ep { display: none; }
}
/* 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; display: grid; place-items: center; flex: none; background: var(--ink); color: var(--on-ink); font: 700 11px var(--mono); }
.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; }
}