/* Companies in Work on the web (server/web/pages/org*.js, drawn with
   server/web/org/kit.js; the phone's kit is components/org/ui.tsx). Every
   colour is a theme variable: Work wears Mono, and the pages must read on
   whatever it wears. The only colours that are not the theme's are a
   company's and a cost centre's own, passed in as data by the kit.

   The look is the Shmangus feel in a professional key (21 Oct 2026, the
   owner: "just text slapped on a page … it should be satisfying to use"):
   the hub is tiles with a candy coin each (the app's own accents, --arc-* in
   games.css), lists are rows on one sticker card, buttons and cards sit on a
   lip and sink when pressed, the buddy hosts what is empty, and titles and
   figures are in the rounded heavy face. One filled button on a screen
   (.org-btn.solid). Every control is at least 44px tall and every row gives
   way before it would push the page sideways (it is read at 320px as often as
   at 1440). */

.org-page { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; }
/* Clear of the floating rail, like Hours: the title starts under it, not behind it. */
.screen-scroll > .inner.org-page { padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: 28px; }
.org-page [hidden], .org-sheet [hidden] { display: none !important; }
.org-body, .org-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- the head: the title, which is the switcher when there is a company ---- */
.org-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; min-width: 0; }
/* The name keeps a fair share of the line; when Employee | Manager would squeeze it, the switch takes the next line, still at the right. */
.org-head > .org-switch, .org-head > .org-head-name { flex: 1 1 190px; }
.org-head > .org-title { flex: 1 1 190px; }

/* ---- Employee | Manager, at the head's right end: one rounded track, the side in front a key on its lip ---- */
.org-mode-slot { flex: none; display: flex; margin-left: auto; }
.org-mode-slot:empty { display: none; }
.org-mode { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid, var(--surface)); }
.org-mode-side {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: none; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-family: var(--arc-font); font-size: 14px; font-weight: 800; color: var(--ink-muted); white-space: nowrap;
  transition: background 160ms ease-out, color 160ms ease-out, transform 140ms var(--arc-spring);
}
.org-mode-side:hover:not(.on) { color: var(--ink); }
.org-mode-side:active { transform: scale(0.96); }
.org-mode-side.on { color: var(--bg); font-weight: 900; background: var(--ink); box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 55%, var(--bg)); }
.org-mode-side:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* In the rail, beside the menu button: as tall as the rail's own keys, on the same frost they float on. */
.float-nav-right .org-mode { box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 14%, transparent); }
.float-nav-right .org-mode-side { min-height: 28px; padding: 0 12px; font-size: 13px; }

/* ---- the front page's money boxes: Wages | Reimbursements, the total and the pay day on the clasp under them ----
   Each box is a key in its area's candy (Pay lime, Reimbursements tangerine: rules HUB_LOOK), opening its own area. */
.org-money { display: flex; flex-direction: column; min-width: 0; }
.org-money-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.org-money-boxes.one { grid-template-columns: minmax(0, 1fr); }
.org-money-box {
  --c: var(--arc-lime);
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 138px; margin-bottom: 4px; padding: 14px 14px 26px;
  border: 1px solid color-mix(in srgb, var(--c) 50%, var(--border)); border-radius: 22px; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 34%, var(--surface)), color-mix(in srgb, var(--c) 12%, var(--surface)) 70%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 50%, var(--border)); transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  animation: org-pop 280ms var(--arc-spring) backwards;
}
.org-money-box + .org-money-box { animation-delay: 40ms; }
.org-money-box:active { transform: translateY(4px); box-shadow: 0 0 0 var(--border); }
.org-money-box:focus-visible, .org-money-clasp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.org-money-box[data-candy="tangerine"] { --c: var(--arc-tangerine); }
.org-money-coin { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); color: color-mix(in srgb, var(--c) 62%, var(--ink)); }
.org-money-coin svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 40; }
.org-money-label { max-width: 100%; font-family: var(--arc-font); font-size: min(14px, calc(100cqi / 7.8)); line-height: 1.2; font-weight: 900; color: var(--ink); overflow-wrap: break-word; }
.org-money-label[data-fit="tight"] { font-size: min(14px, calc(100cqi / 9.3)); }
.org-money-label[data-fit="small"] { font-size: min(13px, calc(100cqi / 10)); }
/* Money is never broken mid-number: one line, sized by its length (rules figureFit) and held under the box's width. */
.org-money-figure { margin-top: auto; padding-top: 6px; font-family: var(--arc-font); font-size: min(27px, calc(100cqi / 5.4)); line-height: 1.15; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-money-figure[data-fit="long"] { font-size: min(22px, calc(100cqi / 6.8)); }
.org-money-figure[data-fit="xlong"] { font-size: min(18px, calc(100cqi / 8.6)); }
/* Never larger than the titles over it: held under the same width rule as the small title. */
.org-money-line { min-height: 17px; font-size: min(12.5px, calc(100cqi / 10.4)); line-height: 1.35; font-weight: 700; color: color-mix(in srgb, var(--ink) 70%, var(--c)); overflow-wrap: break-word; }
.org-money-box.hold .org-money-line { color: var(--hold, var(--accent)); }
.org-money-clasp {
  position: relative; z-index: 2; align-self: center; max-width: calc(100% - 28px); margin-top: -22px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-solid, var(--surface)); box-shadow: 0 3px 0 var(--border); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.35; font-weight: 800; text-align: center; overflow-wrap: break-word; text-wrap: balance;
}
button.org-money-clasp { cursor: pointer; }
button.org-money-clasp:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
/* A long name takes a second line; it is never cut. Only a single word wider than the page is broken. */
.org-title { margin: 0; min-width: 0; font-size: 28px; line-height: 1.2; font-weight: 900; letter-spacing: -0.4px; color: var(--ink); font-family: var(--arc-font); overflow-wrap: anywhere; }
.org-title[data-fit="long"] { font-size: 22px; }
.org-switch { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; min-height: 44px; padding: 3px 0; border: none; background: none; color: var(--ink); cursor: pointer; text-align: left; border-radius: 12px; }
.org-switch:active .org-disc { transform: scale(0.94); }
.org-head-name { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
/* The chevron stays on the name's first line: as tall as one line of it. */
.org-switch-chev { flex: none; display: grid; place-items: center; width: 24px; height: 34px; color: var(--ink-muted); }
.org-switch-chev svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 44; }
.org-switch:hover .org-switch-chev { color: var(--ink); }
/* The colour is the company's own, handed in as --dc by the kit; its initial on a wash of it. */
.org-disc { flex: none; display: inline-grid; place-items: center; border: 2px solid var(--dc, var(--ink-muted)); border-radius: 50%; background: color-mix(in srgb, var(--dc, var(--ink-muted)) 16%, var(--surface)); color: var(--ink); font-family: var(--arc-font); font-weight: 900; line-height: 1; box-shadow: 0 0 0 1px var(--border); transition: transform 120ms var(--arc-spring); }

.org-backrow { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; }
/* Back: a round key with its chevron, top left, on its lip. */
.org-back {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 3px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: 0 3px 0 var(--border); transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.org-back:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.org-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 48; }
.org-area-title { flex: 1; min-width: 0; margin: 0; font-family: var(--arc-font); font-size: 21px; line-height: 1.2; font-weight: 900; letter-spacing: -0.2px; color: var(--ink); overflow-wrap: anywhere; }
.org-backrow-right { flex: none; display: flex; align-items: center; gap: 8px; }

.org-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 8px 8px 14px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--surface); }
.org-banner-text { flex: 1 1 160px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.org-notice { padding: 10px 14px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--arc-mint) 12%, var(--surface)); font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; animation: org-pop 260ms var(--arc-spring) backwards; }
/* The quiet line floats like a snackbar just above the bar at the foot (pages/org.js puts it in the shell, outside
   the page's faded edges, and sets its bottom): nothing under the thumb moves when it comes or goes (21 Oct 2026:
   "Marked done." in the page slid the money boxes and the rows down, and back again six seconds later). */
.app-shell > .org-notice {
  position: absolute; z-index: 40; bottom: 120px; left: 0; right: 0; width: fit-content; max-width: min(440px, calc(100% - 32px)); margin: 0 auto;
  background: color-mix(in srgb, var(--arc-mint) 14%, var(--surface-solid, var(--surface))); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent); pointer-events: none; text-align: center;
}

/* ---- the tabs: one rounded track, the one in front a key on its lip ---- */
.org-tabs { display: flex; gap: 4px; min-width: 0; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.org-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; border: none; border-radius: 999px; background: none; cursor: pointer; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-family: var(--arc-font); font-size: 14.5px; font-weight: 800; color: var(--ink-muted);
  transition: background 160ms ease-out, color 160ms ease-out, transform 140ms var(--arc-spring);
}
.org-tab-label { text-align: center; line-height: 1.15; overflow-wrap: break-word; }
.org-tab:hover:not(.on) { color: var(--ink); }
.org-tab:active { transform: scale(0.96); }
.org-tab.on { color: var(--bg); font-weight: 900; background: var(--ink); box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 55%, var(--bg)); }

/* ---- words ---- */
.org-quiet { font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-err { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--ink); padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: 12px; background: var(--surface); }
/* The sentence gives way and Retry keeps to its end, on the sentence's own line while there is room. */
.org-err > span { flex: 1 1 180px; min-width: 0; }
.org-empty { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 18px; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--ink-muted); }
.org-empty-buddy, .org-hero-buddy { flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--arc-lemon) 24%, transparent); }
.org-empty-buddy { width: 42px; height: 42px; }
.org-empty-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.org-hero { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 4px 0; }
.org-hero-buddy { width: 76px; height: 76px; }
.org-hero > .org-lead { flex: 1; min-width: 0; }
.org-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.org-label { margin: 6px 0 0; font-family: var(--arc-font); font-size: 15px; line-height: 1.25; font-weight: 900; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-lead { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 900; letter-spacing: -0.3px; color: var(--ink); font-family: var(--arc-font); overflow-wrap: anywhere; }
.org-load { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- buttons: stickers on a lip; a press sinks them onto it ---- */
.org-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; margin-bottom: 3px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: normal; text-align: center; max-width: 100%;
  box-shadow: 0 3px 0 var(--border); transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 140ms;
}
.org-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.org-btn.solid { background: var(--ink); color: var(--bg); }
.org-btn.solid { border-color: var(--ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 50%, var(--bg)); }
/* Words alone: a soft pill, still a thing to press, never a bare underline. */
.org-btn.plain { border-color: transparent; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: none; margin-bottom: 0; border-radius: 999px; padding: 0 14px; color: var(--ink); }
.org-btn.plain:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.org-btn.plain:active:not(:disabled) { transform: scale(0.96); }
.org-btn.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); box-shadow: 0 3px 0 color-mix(in srgb, var(--danger) 30%, var(--border)); }
.org-btn.block { width: 100%; min-height: 54px; border-radius: 18px; font-family: var(--arc-font); font-size: 17px; font-weight: 900; }
.org-btn:disabled { opacity: 0.45; cursor: default; }
.org-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.org-icon-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink-muted); cursor: pointer; transition: transform 120ms var(--arc-spring); }
.org-icon-btn:hover { color: var(--ink); background: var(--accent-soft); }
.org-icon-btn:active:not(:disabled) { transform: scale(0.92); }
.org-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 40; }
.org-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.org-btn:focus-visible, .org-icon-btn:focus-visible, .org-switch:focus-visible, .org-tab:focus-visible, .org-row:focus-visible, .org-back:focus-visible, .org-hubtile:focus-visible,
.org-chip.pick:focus-visible, .org-choice:focus-visible, .org-swatch:focus-visible, .org-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.org-tab:focus-visible, .org-row:focus-visible { outline-offset: -2px; }

/* ---- rows on hairlines, together on one sticker card ---- */
.org-rows { display: flex; flex-direction: column; min-width: 0; margin-bottom: 3px; padding: 0 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 3px 0 var(--border); }
.org-rows > :not(:first-child) { border-top: 1px solid var(--border); }
.org-rows:empty { display: none; }
/* A row that opens something answers the finger across the card's whole width. */
.org-rows > button.org-row { width: calc(100% + 28px); margin: 0 -14px; padding-left: 14px; padding-right: 14px; transition: background 120ms; }
.org-rows > button.org-row:first-child { border-radius: 17px 17px 0 0; }
.org-rows > button.org-row:last-child { border-radius: 0 0 17px 17px; }
.org-rows > button.org-row:only-child { border-radius: 17px; }
.org-rows > button.org-row:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.org-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 48px; padding: 8px 0;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left;
}
button.org-row { cursor: pointer; }
button.org-row:disabled { cursor: default; }
button.org-row:disabled .org-row-label { color: var(--ink-muted); }
/* The words keep room for a word like "Address" whatever stands at the row's end, so a long figure wraps before a
   label is broken; a label that is one very long token (an email typed into an invitation) still breaks, and the
   row never pushes the page sideways. */
.org-row-words { flex: 1 1 0; min-width: 5.5em; display: flex; flex-direction: column; gap: 1px; }
.org-row-label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
.org-row-sub { font-size: 13px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
/* A figure wraps between its words, never inside a number ("$13,381.92" is one word). */
.org-row-figure { flex: 0 1 auto; min-width: 0; max-width: 75%; font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: normal; }
.org-row-figure:empty { display: none; }
.org-row.danger .org-row-label { color: var(--danger); }
.org-chev { flex: none; display: grid; place-items: center; color: var(--ink-faint); }
.org-chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.org-person .org-row-label { font-weight: 700; }
.org-person-role { display: none; }
.org-you { flex: none; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--ink-muted); }
/* The theme's own edge stays on, so a dark colour is still a dot on a dark page. */
.org-dot { flex: none; display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); }
.org-unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.org-grow { flex: 1; min-width: 0; }
.org-pickrow .org-pick { flex: 0 1 auto; width: auto; max-width: 62%; }
/* A picker: the whole chosen name, wrapping, and the browser's own list laid over the box to open it. */
.org-pick { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.org-pick:focus-within { border-color: var(--ink); }
.org-pick-label { flex: 1; min-width: 0; overflow-wrap: break-word; }
.org-pick-chev { flex: none; display: grid; place-items: center; color: var(--ink-muted); }
.org-pick-chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.org-pick-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.org-pick-native:disabled { cursor: default; }
.org-pick:has(.org-pick-native:disabled) { opacity: 0.5; }

/* ---- tiles: a small label, the figure in the heavy face, one quiet line; never cut, a long one wraps ---- */
.org-tile { min-width: 0; margin-bottom: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 3px 0 var(--border); }
.org-tile-label { font-size: 12.5px; font-weight: 800; color: var(--ink-muted); overflow-wrap: anywhere; }
/* A money figure is one line, never broken mid-number: a long one is set smaller (rules figureFit, the phone's sizes). */
.org-tile-figure { font-family: var(--arc-font); font-size: 24px; line-height: 1.2; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-tile-figure[data-fit="long"] { font-size: 20px; }
.org-tile-figure[data-fit="xlong"] { font-size: 16px; }
.org-tile-line { min-height: 17px; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.org-tile.hold .org-tile-line { color: var(--hold, var(--accent)); font-weight: 700; }
.org-tile.danger .org-tile-line { color: var(--danger); font-weight: 700; }
.org-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.org-pair { display: flex; flex-direction: column; min-width: 0; }
.org-pair-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.org-clasp { margin: 0 14px; padding: 9px 12px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--arc-lime) 12%, var(--surface)); font-size: 13.5px; line-height: 1.4; font-weight: 800; color: var(--ink); text-align: center; overflow-wrap: anywhere; }

/* ---- chips and pills ---- */
.org-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.org-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 2px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.org-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.org-chip.pick { min-height: 40px; padding: 0 14px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink-muted); }
.org-chip.pick[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.org-pill { flex: none; display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ink-muted); white-space: nowrap; }
.org-pill.hold { border-color: var(--hold, var(--accent)); color: var(--hold, var(--accent)); }
.org-pill.danger { border-color: var(--danger); color: var(--danger); }

/* ---- one choice of a few, each a card with a sentence ---- */
.org-choices { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.org-choice {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; padding: 12px 14px; margin-bottom: 3px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--border);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.org-choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.org-choice.on { border: 1.5px solid var(--ink); padding: 11.5px 13.5px; box-shadow: 0 3px 0 var(--ink); }
.org-choice:disabled { cursor: default; }
.org-choice:disabled:not(.on) { opacity: 0.5; }
.org-choice-mark { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--ink-muted); border-radius: 50%; }
.org-choice.on .org-choice-mark { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--surface); }
.org-choice-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.org-choice-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.org-choice-note { font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.org-choice-body { font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.org-swatch { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.org-swatch.on { border-color: currentColor; }
.org-swatch-dot { width: 26px; height: 26px; border-radius: 50%; }

/* ---- fields ---- */
.org-input {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; outline: none;
}
.org-input::placeholder, .org-search-in::placeholder { color: var(--ink-faint); }
.org-input:focus { border-color: var(--ink); }
.org-input:disabled { opacity: 0.5; }
textarea.org-input { resize: vertical; }
.org-select { appearance: auto; padding-right: 8px; }
/* The date box's own calendar glyph is the browser's: told the theme is dark, it draws it light. */
[data-theme="dark"] input.org-input[type="date"] { color-scheme: dark; }
.org-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.org-field-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.org-hint { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.org-affix { display: flex; align-items: center; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.org-affix:focus-within { border-color: var(--ink); }
.org-affix > .org-input { flex: 1; border: 0; background: none; font-variant-numeric: tabular-nums; }
.org-affix-mark { flex: none; padding: 0 0 0 12px; font-size: 16px; color: var(--ink-muted); }
.org-affix.end > .org-affix-mark { padding: 0 12px 0 0; }
.org-duration { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 260px; }
.org-search { display: flex; align-items: center; min-height: 44px; min-width: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.org-search:focus-within { border-color: var(--ink); }
.org-search-glass { flex: none; display: grid; place-items: center; width: 40px; color: var(--ink-muted); }
.org-search-glass svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.org-search-in { flex: 1; min-width: 0; height: 42px; padding: 0 4px 0 0; border: none; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; appearance: none; }
.org-search-in::-webkit-search-cancel-button { display: none; }

/* A join code: six boxes to type it into, and the same six large to read it from. */
.org-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 336px; }
.org-code-box {
  width: 100%; min-width: 0; height: 52px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 22px; font-weight: 700; text-align: center; text-transform: uppercase; outline: none;
}
.org-code-box:focus { border-color: var(--ink); }
.org-code-show { display: flex; gap: 6px; max-width: 336px; }
.org-code-char { flex: 1 1 0; min-width: 0; padding: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 24px; font-weight: 800; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }

/* ---- a card: one thing set apart (an invitation, the first step) ---- */
.org-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; margin-bottom: 4px; min-width: 0; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--surface); box-shadow: 0 4px 0 var(--ink); }
.org-card-line { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.org-card > .org-code, .org-card > .org-code-show, .org-card > .org-field { align-self: stretch; }
.org-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.org-identity-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.org-identity-name { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 900; letter-spacing: -0.3px; color: var(--ink); font-family: var(--arc-font); overflow-wrap: anywhere; }
.org-identity-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-list-text { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.org-list-text > li { padding-left: 12px; border-left: 2px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.org-list-text.strong > li { border-left-color: var(--ink); }
.org-line { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; min-width: 0; }
.org-line-text { font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.org-line-when { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.org-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }

/* ---- a sheet: everything typed happens in one ---- */
.org-sheet-back { align-items: flex-end; padding: 0; }
.org-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: min(92vh, 92dvh); min-height: 0;
  border: 1px solid var(--border); border-bottom: none; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); overflow: hidden;
}
.org-sheet.wide { max-width: 560px; }
.org-sheet-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--border); }
.org-sheet-title { flex: 1; min-width: 0; margin: 0; font-size: 19px; line-height: 1.25; font-weight: 900; color: var(--ink); font-family: var(--arc-font); overflow-wrap: anywhere; }
.org-sheet-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.org-sheet-err { flex: none; padding: 0 18px; }
.org-sheet-err > .org-err { margin-bottom: 10px; }
.org-sheet-foot { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.org-sheet-foot:empty { display: none; }
.org-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.org-option:disabled { cursor: default; opacity: 0.55; }
.org-option-tick { flex: none; display: grid; place-items: center; width: 20px; color: var(--ink); }
.org-option-tick svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 48; }
@media (min-width: 720px) {
  .org-sheet-back { align-items: center; padding: 18px; }
  .org-sheet { max-height: min(88vh, 88dvh); border-bottom: 1px solid var(--border); border-radius: 22px; }
}
@media (max-width: 360px) {
  .org-title { font-size: 24px; }
  .org-title[data-fit="long"] { font-size: 19px; }
  .org-identity-name { font-size: 20px; }
  /* A picker in a row takes the line under its label: the whole chosen name has the width. */
  .org-pickrow { flex-wrap: wrap; }
  .org-pickrow .org-pick { flex-basis: 100%; max-width: none; }
  /* A long figure goes under its label rather than squeezing the label into a column (kit row: data-fig). */
  .org-row[data-fig] { flex-wrap: wrap; }
  .org-row[data-fig] > .org-row-figure { order: 5; flex-basis: 100%; max-width: none; text-align: left; }
  .org-row[data-fig="under-lead"] > .org-row-figure { padding-left: 24px; }
  /* A person's role is the second line under their name; anything else at a row's end (a week's time) goes under it. */
  .org-person-role { display: block; }
  .org-person > .org-person-roleword { display: none; }
  .org-person { flex-wrap: wrap; }
  .org-person > .org-row-figure { order: 5; flex-basis: 100%; max-width: none; padding-left: 50px; text-align: left; }
  .org-tab { font-size: 13.5px; padding: 0 4px; }
  .org-switch-chev { height: 29px; }
  .org-tile { padding: 10px; }
  .org-tile-figure { font-size: 19px; }
  .org-tile-figure[data-fit="long"] { font-size: 16px; }
  .org-tile-figure[data-fit="xlong"] { font-size: 13px; }
  .org-tile-label { font-size: 11.5px; }
  .org-hubtiles { gap: 10px; }
  .org-hubtile { padding: 12px; min-height: 96px; }
  .org-mode-side { padding: 0 11px; font-size: 13px; }
  .org-money-boxes { gap: 8px; }
  .org-money-box { padding: 12px 12px 26px; min-height: 128px; }

  .org-code-box { height: 46px; font-size: 20px; }
  .org-code-char { font-size: 20px; }
  .org-card { padding: 14px; }
}

/* ---- the hub's tiles: a candy coin with the area's glyph, its name, its live figure; two to a line ----
   The candy is the app's own (--arc-* in games.css): each area wears one, the same on the phone
   (rules/frame.mjs HUB_LOOK). The tiles pop in with the arcade's spring and sink when pressed. */
.org-hubtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
/* Both tiles one size: every line as tall as the tallest. */
.org-hubtiles { grid-auto-rows: 1fr; }
.org-hubtile {
  --c: var(--arc-sky);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; min-height: 104px; margin-bottom: 4px; padding: 14px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 4px 0 var(--border); transition: transform 90ms ease-out, box-shadow 90ms ease-out, border-color 140ms;
  animation: org-pop 280ms var(--arc-spring) backwards;
}
.org-hubtile:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--border)); }
.org-hubtile:active { transform: translateY(4px); box-shadow: 0 0 0 var(--border); }
.org-hubtile:nth-child(2) { animation-delay: 25ms; }
.org-hubtile:nth-child(3) { animation-delay: 50ms; }
.org-hubtile:nth-child(4) { animation-delay: 75ms; }
.org-hubtile:nth-child(n+5) { animation-delay: 100ms; }
.org-hubtile-coin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 68%, var(--ink)); }
.org-hubtile-coin svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 40; }
/* The coin alone, leading a row of Reports and settings. */
.org-coin { --c: var(--arc-sky); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 68%, var(--ink)); }
.org-coin svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 40; }
/* The front page's keys: one list of rows under everything it shows, each led by its area's coin. */
.org-keys { margin-top: 4px; }
.org-keys > .org-row { min-height: 56px; }
/* A company of one: the step that asks for the team. */
.org-invite-step { align-items: stretch; }
.org-hubtile-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
/* A word of a name is never broken: each size is also held under what the key's own width lets that many letters
   have (the key is the container, 100cqi its inside; a letter of the rounded face is under 0.7em). */
.org-hubtile, .org-money-box { container-type: inline-size; }
.org-hubtile-label { font-family: var(--arc-font); font-size: min(16.5px, calc(100cqi / 7.8)); line-height: 1.2; font-weight: 900; color: var(--ink); overflow-wrap: break-word; }
.org-hubtile-label[data-fit="tight"] { font-size: min(14.5px, calc(100cqi / 9.3)); }
.org-hubtile-label[data-fit="small"] { font-size: min(13px, calc(100cqi / 10)); }
.org-hubtile-figure { font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink-muted); overflow-wrap: break-word; }
.org-hubtile-figure:empty { display: none; }
.org-hubtile[data-candy="berry"], .org-coin[data-candy="berry"] { --c: var(--arc-berry); }
.org-hubtile[data-candy="tangerine"], .org-coin[data-candy="tangerine"] { --c: var(--arc-tangerine); }
.org-hubtile[data-candy="lemon"], .org-coin[data-candy="lemon"] { --c: var(--arc-lemon); }
.org-hubtile[data-candy="mint"], .org-coin[data-candy="mint"] { --c: var(--arc-mint); }
.org-hubtile[data-candy="sky"], .org-coin[data-candy="sky"] { --c: var(--arc-sky); }
.org-hubtile[data-candy="grape"], .org-coin[data-candy="grape"] { --c: var(--arc-grape); }
.org-hubtile[data-candy="bubble"], .org-coin[data-candy="bubble"] { --c: var(--arc-bubble); }
.org-hubtile[data-candy="lime"], .org-coin[data-candy="lime"] { --c: var(--arc-lime); }
.org-hubtile[data-candy="teal"], .org-coin[data-candy="teal"] { --c: var(--arc-teal); }
@keyframes org-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .org-hubtile, .org-notice, .org-money-box { animation: none; }
}

/* ---------------------------------------------------------------- hours
   the Hours page in a company, the clock, the week strip, an entry.
   This area's own classes go between this comment and the next one, and
   nowhere else in this file: theme variables only, classes named org-hours-*.
   ---------------------------------------------------------------- */
/* The week: before and after, the range between them, and the way back to this week at the row's end. */
/* The timesheet drawn in the Company page's Hours area, under its Back. */
.org-hours-embedded { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.org-hours-weeknav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.org-hours-range { flex: 0 1 auto; min-width: 0; padding: 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.org-hours-weeknav > .org-icon-btn:last-child:not(:nth-child(3)) { margin-left: auto; }
.org-hours-weeknav > .org-icon-btn:disabled { opacity: 0.35; cursor: default; background: none; }
/* The week's arrows are bare chevrons: a ring would read as the page's own Back above them. */
.org-hours-weeknav > .org-icon-btn { border-color: transparent; background: none; }
.org-hours-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.org-hours-total-label { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.org-hours-total-figure { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.org-hours-total-of { font-size: 13.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.org-hours-total > .org-pill { align-self: center; }

/* The clock: where it stands, what it runs on, and the screen's one filled button. */
.org-hours-clock { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.org-hours-state { font-size: 13.5px; line-height: 1.4; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.org-hours-running { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.org-hours-clock-foot { display: flex; justify-content: center; }
/* Clock in and the Earlier key beside it (org/clockStart.js; the wheel's own look is in styles.css). */
.org-hours-in-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.org-hours-in-row > .org-btn.block { flex: 1; min-width: 0; width: auto; white-space: normal; text-align: center; padding: 4px 12px; }
.org-hours-in-row > .clock-earlier { min-height: 48px; border-radius: 12px; }
.org-hours-clock .clock-start { background: var(--bg); }
/* A cost centre picked to share the time with: ticked and outlined in ink. The card's one filled thing is its button. */
.org-hours-picks .org-chip.pick[aria-pressed='true'] { border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); }
.org-hours-picks .org-chip svg { flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 52; }

/* The front page's clock (the Catena app's timer card, in the arcade's candy): one round key that clocks in or out,
   what it stands on, the running time or Earlier at the end; the two small keys to add hours or a receipt under it. */
.org-hours-front { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-bottom: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 3px 0 var(--border); }
.org-hours-front-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.org-hours-front-key {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  background: var(--arc-mint); color: var(--bg); cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--arc-mint) 60%, var(--ink));
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.org-hours-front-key[data-on="true"] { background: var(--surface); color: var(--danger); border: 2.5px solid var(--danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 14%, transparent); animation: org-hours-breathe 2.4s ease-in-out infinite; }
.org-hours-front-key:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--arc-mint) 60%, var(--ink)); }
.org-hours-front-key:disabled { opacity: 0.5; cursor: default; }
.org-hours-front-key:focus-visible, .org-hours-front-pick:focus-visible, .org-hours-glance:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.org-hours-front-key svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 20; }
.org-hours-front-key[data-on="false"] svg { margin-left: 3px; }
.org-hours-front-words { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.org-hours-front-title { font-family: var(--arc-font); font-size: 18px; line-height: 1.25; font-weight: 900; color: var(--ink); overflow-wrap: break-word; }
.org-hours-front-line { font-size: 13.5px; line-height: 1.35; font-weight: 700; color: var(--ink-muted); overflow-wrap: break-word; }
.org-hours-front-pick { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink-muted); text-align: left; cursor: pointer; }
.org-hours-front-pick > span { min-width: 0; overflow-wrap: break-word; }
.org-hours-front-pick svg { flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 48; }
.org-hours-front-run { flex: none; font-family: var(--arc-font); font-size: 24px; line-height: 1.1; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.org-hours-front-row > .clock-earlier { flex: none; min-height: 44px; border-radius: 14px; }
.org-hours-front .clock-start { background: var(--bg); }
.org-hours-front-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.org-hours-front-quick > .org-btn { min-width: 0; padding: 0 8px; white-space: normal; text-align: center; }
/* A narrow phone: Earlier is its clock alone (it still says what it is to a screen reader), and the two small keys
   keep their words on one line. */
@media (max-width: 360px) {
  .org-hours-front-row > .clock-earlier:not(.open) { width: 44px; padding: 0; gap: 0; font-size: 0; }
  .org-hours-front-row > .clock-earlier svg { width: 20px; height: 20px; }
  .org-hours-front-quick > .org-btn { padding: 0 6px; font-size: 14px; }
}
@keyframes org-hours-breathe { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--danger) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .org-hours-front-key[data-on="true"] { animation: none; } }

/* The front page's week at a glance: today over this week on the left, the seven days as bars beside them at every
   width (bars dropped under the figures left a band of nothing at phone width), today lit. The card opens Hours. */
.org-hours-glance {
  display: flex; align-items: flex-end; gap: 16px; width: 100%; min-width: 0; margin-bottom: 3px; padding: 14px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 3px 0 var(--border);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.org-hours-glance:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.org-hours-glance-figs { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.org-hours-glance-fig { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.org-hours-glance-label { font-size: 13px; line-height: 1.3; font-weight: 800; color: var(--ink-muted); }
.org-hours-glance-value { font-family: var(--arc-font); font-size: 24px; line-height: 1.15; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-hours-glance-bars { flex: 1 1 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.org-hours-glance-day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.org-hours-glance-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 72px; }
.org-hours-glance-bar { display: block; width: min(16px, 70%); min-height: 5px; border-radius: 6px; background: var(--arc-sky); }
/* A day's bar is its share of a full day, in tenths (rules frontWeek). */
.org-hours-glance-bar[data-level="1"] { height: 10%; }
.org-hours-glance-bar[data-level="2"] { height: 20%; }
.org-hours-glance-bar[data-level="3"] { height: 30%; }
.org-hours-glance-bar[data-level="4"] { height: 40%; }
.org-hours-glance-bar[data-level="5"] { height: 50%; }
.org-hours-glance-bar[data-level="6"] { height: 60%; }
.org-hours-glance-bar[data-level="7"] { height: 70%; }
.org-hours-glance-bar[data-level="8"] { height: 80%; }
.org-hours-glance-bar[data-level="9"] { height: 90%; }
.org-hours-glance-bar[data-level="10"] { height: 100%; }
.org-hours-glance-day[data-today="true"] .org-hours-glance-bar { background: var(--arc-mint); }
.org-hours-glance-day[data-none="true"] .org-hours-glance-bar { background: var(--border); }
.org-hours-glance-letter { font-size: 12px; line-height: 1.2; font-weight: 800; color: var(--ink-muted); }
.org-hours-glance-day[data-today="true"] .org-hours-glance-letter { color: var(--ink); }

/* The week strip: seven days, the hours under each, a dot where there are entries, today ringed. */
.org-hours-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.org-hours-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 76px; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--ink-muted); font: inherit; cursor: pointer; }
.org-hours-day:disabled { opacity: 0.4; cursor: default; }
.org-hours-day:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.org-hours-day-name { font-size: 11px; font-weight: 700; }
.org-hours-day-num { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid transparent; border-radius: 50%; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.org-hours-now { border-color: var(--ink); color: var(--ink); font-weight: 800; }
.org-hours-day.on .org-hours-day-name { color: var(--ink); }
.org-hours-day.on .org-hours-day-num { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 800; }
.org-hours-day-time { min-height: 14px; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-hours-dot { width: 5px; height: 5px; border-radius: 50%; background: none; }
.org-hours-dot.on { background: var(--ink-muted); }
.org-hours-dot.hold { background: var(--hold, var(--accent)); }
.org-hours-dot.danger { background: var(--danger); }

/* An entry in a list: its note (two lines of it at most), its length at the row's end with what it is worth under it. */
.org-hours-title { min-width: 0; overflow-wrap: break-word; }
.org-hours-length { display: block; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-hours-value { display: block; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-row-sub > .org-chips { padding: 2px 0; }

/* An entry opened: who asked or decided, in their own words. */
.org-hours-story { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-left: 2px solid var(--border); background: var(--surface); min-width: 0; }
.org-hours-story.hold { border-left-color: var(--hold, var(--accent)); }
.org-hours-story.danger { border-left-color: var(--danger); }
.org-hours-story-who { font-size: 13px; font-weight: 700; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-hours-story-quote { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* The sheet that adds hours: a part a cost centre, and what is left of the total. */
.org-hours-part { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.org-hours-part + .org-hours-part { padding-top: 12px; border-top: 1px solid var(--border); }
.org-hours-part-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.org-hours-part-head > .org-label { margin: 0; }
.org-hours-left { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The task a sheet of hours is logged on: its title, fixed, and the way to take it off. */
.org-hours-task { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.org-hours-task-title { flex: 1; min-width: 0; padding: 8px 0; font-size: 15px; line-height: 1.35; color: var(--ink-muted); overflow-wrap: anywhere; }

/* The hub's This week: the team's minutes by cost centre, each part in its own colour. */
.org-hours-bar { display: flex; gap: 2px; height: 12px; min-width: 0; border-radius: 6px; overflow: hidden; }
.org-hours-seg { flex: 1 1 0; min-width: 4px; height: 100%; border: 0; border-radius: 0; background: var(--ink-muted); }
@media (max-width: 360px) {
  .org-hours-running { font-size: 34px; }
  .org-hours-total-figure { font-size: 21px; }
  .org-hours-day-num { width: 28px; height: 28px; font-size: 13px; }
  .org-hours-strip { gap: 0; }
}

/* ---------------------------------------------------------------- pay
   the two boxes in use, a statement, team pay, week by week, a payment, a rate.
   This area's own classes go between this comment and the next one, and
   nowhere else in this file: theme variables only, classes named org-pay-*.
   ---------------------------------------------------------------- */

/* The two boxes in use. A figure of money is never cut: where it will not fit on its line it takes a second. */
.org-pay-boxes { min-width: 0; }
/* Somebody paid ahead: one tile across the width, where the two boxes would stand. */
.org-pay-one { grid-template-columns: minmax(0, 1fr); }
.org-pay-boxes .org-tile-label, .org-pay-boxes .org-tile-line { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* A clasp that takes two lines breaks them evenly, never leaving the month on a line of its own. */
.org-pay-boxes .org-clasp { text-wrap: balance; }
.org-pay-press { border-radius: 14px; cursor: pointer; }
.org-pay-press:hover .org-tile, .org-pay-press:hover .org-clasp { border-color: var(--ink-muted); }
.org-pay-press:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* A row that opens to the lines under it, in place: a week to what is in it, a month to its people. */
.org-pay-fold { display: flex; flex-direction: column; min-width: 0; }
.org-pay-turn { flex: none; display: grid; place-items: center; color: var(--ink-faint); transition: transform 0.15s ease; }
.org-pay-turn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.org-row[aria-expanded='true'] .org-pay-turn { transform: rotate(180deg); }
.org-pay-lines { min-width: 0; margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--border); }
.org-pay-lines .org-rows { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.org-pay-lines .org-rows > button.org-row { width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
.org-pay-lines .org-row { min-height: 40px; padding: 5px 0; }
.org-pay-lines .org-row-label { font-size: 14px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .org-pay-turn { transition: none; } }

/* A row with a button beside it (Pay in Who's owed, Remove on a payment): the row may open something; the button is never inside it. */
.org-pay-beside { display: flex; align-items: center; gap: 8px; min-width: 0; }
.org-pay-beside > .org-row { flex: 1 1 0; width: auto; }
/* Beside a Pay button there is no room for the name and the amount side by side on a phone: the amount goes under the name. */
@media (max-width: 480px) {
  .org-pay-beside > .org-row { flex-wrap: wrap; }
  .org-pay-beside > .org-row > .org-row-figure { order: 5; flex-basis: 100%; max-width: none; text-align: left; }
}
/* Somebody whose pay is overdue: the amount over its word. */
.org-pay-due { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }

/* The rate sheet: what saving this rate would change, said before it is saved. */
.org-pay-says { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.org-pay-says:empty { display: none; }
.org-pay-says > .org-note { padding-left: 12px; border-left: 2px solid var(--ink); color: var(--ink); }
.org-sheet-foot > .org-pay-says { flex: 1 1 100%; }

@media (max-width: 360px) {
  /* Too narrow for a name, its figures and a button on one line: the button goes under the row it belongs to. */
  .org-pay-beside { flex-wrap: wrap; justify-content: flex-end; }
  .org-pay-beside > .org-row { flex-basis: 100%; }
  .org-pay-beside > .org-btn { margin: -2px 0 10px; }
}

/* Week by week: the week looked at, between the one before and the one after. */
.org-pay-weeknav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.org-pay-weekname { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.org-pay-weeknav .org-icon-btn:disabled { opacity: 0.35; cursor: default; }
/* The weeks' arrows are bare chevrons, as Hours' are. */
.org-pay-weeknav .org-icon-btn { border-color: transparent; background: none; }

/* ---------------------------------------------------------------- claims
   reimbursements: the list, one claim, its receipt.
   This area's own classes go between this comment and the next one, and
   nowhere else in this file: theme variables only, classes named org-claims-*.
   ---------------------------------------------------------------- */

/* A claim in a list: what it was (two lines of it at most), its amount at the row's end, and what was asked or why it was turned away. */
.org-claims-title { /* preview: a long description in a list, opened whole by its row */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; overflow-wrap: break-word; }
.org-claims-amount { display: block; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Money that is in nobody's owed figure (turned away, long term) is drawn quietly. */
.org-claims-amount.quiet { font-weight: 600; color: var(--ink-muted); }
.org-claims-asked { display: block; margin-top: 3px; padding-left: 8px; border-left: 2px solid var(--border); color: var(--ink); }
.org-claims-asked.hold { border-left-color: var(--hold, var(--accent)); }
.org-claims-asked.danger { border-left-color: var(--danger); }

/* The top of a list: what is owed for them, and Add beside the figure it adds to. A figure of money is never cut. */
.org-claims-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.org-claims-top > .org-tile { flex: 1 1 0; }
.org-claims-top .org-tile-label, .org-claims-top .org-tile-line { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

/* A row with a button beside it (Fix it): the row is never the button. */
.org-claims-beside { display: flex; align-items: center; gap: 8px; min-width: 0; }
.org-claims-beside > .org-row { flex: 1 1 0; width: auto; }

/* A claim opened: the amount and what it was as the heading. A long figure wraps, it is never cut. */
.org-claims-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Whose claim: the face and the name on one line, the name wrapping beside it. */
.org-claims-who { flex-wrap: nowrap; align-items: center; }
.org-claims-figure { font-size: 32px; line-height: 1.15; font-weight: 900; letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--arc-font); white-space: nowrap; }
.org-claims-acts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.org-claims-what { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.org-claims-head > .org-chips { padding-top: 2px; }
.org-claims-says { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* Who asked or decided, in their own words. */
.org-claims-story { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-left: 2px solid var(--border); background: var(--surface); min-width: 0; }
.org-claims-story.hold { border-left-color: var(--hold, var(--accent)); }
.org-claims-story.danger { border-left-color: var(--danger); }
.org-claims-story-who { font-size: 13px; font-weight: 700; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-claims-story-quote { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* The timeline: added, what a reviewer made of it, pay. A mark a step, joined by a line; what has happened is filled, where it stands is ringed, what is to come is faint. */
.org-claims-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; min-width: 0; }
.org-claims-step { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding-bottom: 14px; }
.org-claims-step:last-child { padding-bottom: 0; }
.org-claims-step:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.org-claims-step-mark { flex: none; width: 14px; height: 14px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); }
.org-claims-step.now .org-claims-step-mark { background: var(--bg); box-shadow: 0 0 0 3px var(--accent-soft); }
.org-claims-step.next .org-claims-step-mark { border-color: var(--border); background: var(--bg); }
.org-claims-step.hold .org-claims-step-mark { border-color: var(--hold, var(--accent)); }
.org-claims-step.danger .org-claims-step-mark { border-color: var(--danger); }
.org-claims-step-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.org-claims-step-label { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.org-claims-step.next .org-claims-step-label { font-weight: 600; color: var(--ink-muted); }
.org-claims-step-sub { font-size: 13px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }

/* The receipt: a picture small enough to sit in the page, pressed to see it whole. */
.org-claims-receipt { display: flex; min-width: 0; }
.org-claims-thumb { display: block; width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 10px; object-fit: cover; background: var(--surface); }
.org-claims-thumb-large { width: 132px; height: 132px; border-radius: 12px; }
.org-claims-thumb-btn { padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; }
.org-claims-thumb-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.org-claims-photo { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
/* In the sheet that adds one: the picture picked (or that there is none), and the ways to hand one over. */
.org-claims-pick { display: flex; align-items: center; gap: 12px; min-width: 0; }
.org-claims-pick-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.org-claims-pick-state { font-size: 14px; color: var(--ink-muted); }

/* What it said before: who changed it and when, then each thing that was different. */
.org-claims-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.org-claims-history > li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--border); min-width: 0; }
.org-claims-history-who { font-size: 13px; font-weight: 700; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-claims-history-line { font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 360px) {
  .org-claims-figure { font-size: 27px; }
  /* Too narrow for the words, the figure and a button on one line: the button goes under the row it belongs to. */
  .org-claims-beside { flex-wrap: wrap; justify-content: flex-end; }
  .org-claims-beside > .org-row { flex-basis: 100%; }
  .org-claims-beside > .org-btn { margin: -2px 0 10px; }
  .org-claims-pick { align-items: flex-start; }
}

/* ---------------------------------------------------------------- review
   the review feed.
   This area's own classes go between this comment and the next one, and
   nowhere else in this file: theme variables only, classes named org-review-*.
   ---------------------------------------------------------------- */

/* A card of the feed: whose it is and the figure, what it is in words, the question it is held with, then what may be done. */
.org-review-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 0; }
.org-review-open { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; }
button.org-review-open { cursor: pointer; }
button.org-review-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.org-review-open > .face { flex: none; }
.org-review-words { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.org-review-name { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.org-review-what { font-size: 14.5px; line-height: 1.4; color: var(--ink); overflow-wrap: break-word; }
.org-review-sub, .org-review-flag { font-size: 13px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.org-review-flag { font-weight: 700; }
.org-review-figure { flex: none; max-width: 45%; display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
/* At 320 the figure goes under the words, so the name and what it was keep the card's width. */
@media (max-width: 360px) {
  .org-review-open { flex-wrap: wrap; }
  .org-review-open > .org-review-figure { order: 5; flex-basis: 100%; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-left: 46px; }
}
.org-review-value { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
/* The question, in the hold tone and nothing else of the card. Under the words, clear of the face. */
.org-review-asked { display: block; margin: 0 0 0 46px; padding: 6px 10px; border-left: 2px solid var(--hold, var(--accent)); background: var(--surface); font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.org-review-mine { display: flex; flex-direction: column; min-width: 0; }
.org-review-mine > .org-review-asked { margin: 0 0 12px; }
.org-review-card > .org-note { margin-left: 46px; }
.org-review-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-left: 46px; }
/* Deciding several at once: a circle a card, ticked in ink. One that cannot be approved keeps an empty, faint one. */
.org-review-tick { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.org-review-tick::before { content: ''; grid-area: 1 / 1; width: 22px; height: 22px; border: 1.5px solid var(--ink-muted); border-radius: 50%; }
.org-review-tick.on::before { border-color: var(--ink); background: var(--ink); }
.org-review-tick-off::before { border-color: var(--border); }
.org-review-tick svg { grid-area: 1 / 1; z-index: 1; width: 14px; height: 14px; stroke: var(--bg); fill: none; stroke-width: 56; }
/* The hub: what of the team's is on hold, said in the hold tone. */
.org-review-held { color: var(--hold, var(--accent)); font-weight: 700; }

/* ---------------------------------------------------------------- tasks
   tasks: the list, one task and its trail.
   This area's own classes go between this comment and the next one, and
   nowhere else in this file: theme variables only, classes named org-tasks-*.
   ---------------------------------------------------------------- */

/* The list's two rows of tabs, one under the other: whose, then open or done. The second is the quieter. */
.org-tasks-tabs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The second track is the smaller one, as wide as its two words. */
.org-tasks-tabs > .org-tabs + .org-tabs { align-self: flex-start; }
.org-tasks-tabs > .org-tabs + .org-tabs .org-tab { flex: 0 1 auto; min-height: 40px; padding: 0 16px; font-size: 13.5px; }

/* A task in a list: its tick, the row that opens it, and Take it beside it. Neither the tick nor the button is inside the row. */
.org-tasks-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.org-tasks-row > .org-row { flex: 1 1 0; width: auto; }
.org-tasks-tick { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -9px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); }
button.org-tasks-tick { cursor: pointer; }
button.org-tasks-tick:disabled { opacity: 0.45; cursor: default; }
button.org-tasks-tick:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
/* The mark: a ring, and once the task is finished a ring in ink with a tick in it. Never filled: a list of finished tasks is not a list of buttons. */
.org-tasks-mark { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink-muted); border-radius: 50%; }
.org-tasks-mark.on { border-color: var(--ink); }
.org-tasks-mark svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 60; }
button.org-tasks-tick:hover .org-tasks-mark { border-color: var(--ink); }
/* No tick to draw: the titles still start on one line. */
.org-tasks-gap { flex: none; width: 31px; }
/* In a sheet of people, the choice that is nobody: its words start where the names do, after a disc's room. */
.org-tasks-nolead { flex: none; width: 32px; }
.org-tasks-title { min-width: 0; overflow-wrap: anywhere; }
/* Under the title: the one pill, then the quiet line, on one line while there is room. */
.org-tasks-line { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; min-width: 0; padding-top: 2px; }
.org-tasks-off { color: var(--ink-muted); text-decoration: line-through; }

/* A task opened: its tick beside its title, the state under it as a pill that is pressed to change it. */
.org-tasks-head { display: flex; align-items: flex-start; gap: 2px; min-width: 0; }
.org-tasks-head > .org-tasks-tick { margin-top: -6px; }
.org-tasks-head > .org-identity-name { flex: 1; min-width: 0; }
.org-tasks-head > .org-identity-name.org-tasks-off { color: var(--ink-muted); }
.org-tasks-state .org-chip.pick { gap: 4px; padding: 0 10px 0 14px; color: var(--ink); }
.org-tasks-state .org-chip svg { flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 48; }
/* Words somebody wrote, as they wrote them: the details of a task, a comment. */
.org-tasks-words { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.org-tasks-trail { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--border); }
.org-tasks-trail > * { border-bottom: 1px solid var(--border); }
.org-tasks-said { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 10px 12px; border-left: 2px solid var(--ink); min-width: 0; }

/* The sheet's priority: the chosen one ticked and outlined in ink. The sheet's one filled thing is its button. */
.org-tasks-picks .org-chip.pick[aria-pressed='true'] { border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); }
.org-tasks-picks .org-chip svg { flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 52; }

@media (max-width: 360px) {
  /* Too narrow for a title, its pill and a button on one line: Take it goes under the row it belongs to, under the title. */
  .org-tasks-row { flex-wrap: wrap; }
  .org-tasks-row > .org-row { flex-basis: calc(100% - 40px); }
  .org-tasks-row > .org-btn { margin: -2px 0 10px 33px; }
}