/* 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; }
@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 .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; }
.tl details.pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 36px; 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; }