/* Tapadoo's look, taken from tapadoo.com: warm cream and peach grounds,
   the Tapadoo orange, warm brown-grey type and Montserrat, with rounded
   pill buttons. It overrides theme.css's tokens only, so every component
   keeps its structure and accessibility.

   Contrast (WCAG 2.2 AA, measured): the site's own orange #ff5f1f is
   3.0:1 under white text, so filled buttons use a deeper #cc4a12 (4.6:1)
   and links #c2410c (4.9:1 on cream). The bright orange stays for
   decoration: the brand mark, focus rings and the current nav item's
   edge. Dark mode keeps day's dark palette with the orange accent. */

/* Montserrat, served from the app because the CSP allows no font host.
   One variable file, Latin subset, every weight; SIL Open Font License,
   brand/montserrat-OFL.txt. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("brand/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --rst-font: Montserrat, "Avenir Next", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --rst-title-weight: 700;

  --rst-radius: 14px;
  --rst-radius-sm: 10px;

  --rst-bg: light-dark(#fff8f4, #0c0d0f);
  --rst-surface: light-dark(#ffffff, #161412);
  --rst-surface-2: light-dark(#fff1e8, #1c1916);
  --rst-rail-bg: light-dark(#fff1e8, #12100e);
  --rst-line: light-dark(#f1dfd3, #2b2622);
  --rst-line-strong: light-dark(#8f7b70, #7b6f68);

  --rst-text: light-dark(#3b2f2a, #f1ebe7);
  --rst-text-muted: light-dark(#6b5a52, #b3a79f);
  --rst-text-faint: light-dark(#7d6b63, #978a82);

  --rst-accent: light-dark(#c2410c, #ff8a57);
  --rst-accent-soft: light-dark(#ffe0ce, #3a1d10);
  --rst-accent-fill: light-dark(#cc4a12, #cc4a12);
  --rst-accent-fill-hover: light-dark(#b53f0d, #b53f0d);
  --rst-accent-fill-edge: light-dark(#9a350a, #9a350a);
  --rst-accent-fill-edge-hover: light-dark(#862e08, #862e08);
  --rst-on-accent-fill: #ffffff;

  --rst-nav-current-bg: light-dark(#ffe0ce, #3a1d10);
  --rst-nav-current-fg: light-dark(#7a2c07, #ffd2bb);
  --rst-focus-edge: #ff5f1f;
}

/* Buttons are pills on tapadoo.com. */
[rst-btn] {
  border-radius: 999px;
}

/* The brand: Tapadoo's logo from tapadoo.com, then the product name. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.brand-mark img {
  height: 1.6rem;
  width: auto;
}

/* The statement: amounts line up in one column. */
.statement {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.statement th,
.statement td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--rst-line);
}

.statement th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rst-text-muted);
}

.statement a {
  color: var(--rst-accent);
}

.statement td:first-child {
  white-space: nowrap;
}

.statement .amount {
  text-align: right;
  white-space: nowrap;
}

.statement .opening td,
.statement .closing td {
  font-weight: 700;
  background: var(--rst-surface-2);
}

.statement .reserved td {
  color: var(--rst-text-muted);
}

/* The live summary under the request form's dates. */
.request-summary {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Local testing only: a way to become someone else, in the profile menu
   so pages look as they will in production. */
.dev-switch {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: var(--rst-radius-sm);
  color: var(--rst-text);
  font-size: var(--rst-fs-sm);
  text-decoration: none;
}

.dev-switch:hover {
  background: var(--rst-accent-soft);
}

/* A callout that is one link, end to end (the approvals nudge): the
   whole pane is the target, and it answers hover and focus as a link. */
.callout-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--rst-radius);
}

.callout-link:hover [rst-callout] {
  border-color: var(--rst-accent);
}

.callout-link:focus-visible {
  outline: 2px solid var(--rst-focus-edge);
  outline-offset: 2px;
}

/* The sign-in card's one way in, full width, and the local picker
   under it at the card's width. */
.signin-google {
  width: 100%;
  justify-content: center;
}

.signin-note {
  margin: 0.5rem 0 0;
  text-align: center;
  color: var(--rst-text-muted);
  font-size: 0.9rem;
}

.signin-dev {
  max-width: 26rem;
  margin: 1.5rem auto 0;
}

[rst-signin-mark] img {
  height: 2.75rem;
  width: auto;
}

/* A Workspace photo fills the avatar circle instead of the initial. */
.avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Balances: one row per person. The name is a row heading, so it reads
   as body text rather than a column label; on a phone the table
   scrolls inside its box instead of squeezing the figures. */
.balances th[scope="row"] {
  font-size: inherit;
  font-weight: 600;
  color: var(--rst-text);
}

.balances th[scope="row"] a {
  white-space: nowrap;
  margin-right: 0.25rem;
}

/* Badges say what Admin should know about someone: quiet, and always in
   words (DEC-36). */
.balances th [rst-badge] {
  font-weight: 400;
  white-space: nowrap;
}

.balances .not-ready {
  color: var(--rst-text-muted);
  font-style: italic;
}

.balances-wrap {
  overflow-x: auto;
}

.balances-key {
  font-size: 0.85rem;
  color: var(--rst-text-muted);
}

/* People: the Workspace sync sits at the end of the toolbar (DEC-36). */

.sync-line .synced .icon {
  color: var(--rst-tone-positive-fg);
  vertical-align: -0.15em;
}

/* Admin's person page: the facts Admin sets, a quiet label, the value,
   and its own Change link (DEC-36, DEC-37). */
.facts {
  margin: 0 0 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.facts > div {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
}

.facts > div + div {
  border-top: 1px solid var(--rst-line);
}

.facts dt {
  color: var(--rst-text-muted);
  font-size: 0.9rem;
}

.facts dd {
  margin: 0;
}

.facts .act {
  white-space: nowrap;
  font-size: 0.9rem;
}

.facts .from {
  color: var(--rst-text-muted);
}

@media (max-width: 40rem) {
  .facts > div {
    grid-template-columns: 1fr auto;
  }

  .facts dt {
    grid-column: 1 / -1;
  }
}

/* Admin's person page. */
.box-note {
  font-size: 0.85rem;
  color: var(--rst-text-muted);
}

.outside ul {
  margin: 0.5rem 0 1rem 1.25rem;
}

.weekdays {
  border: 0;
  padding: 0;
}

.weekdays [rst-switch] {
  display: flex;
  margin: 0.4rem 0;
}

[rst-box-head] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Words for screen readers only, such as which year a "Change" link is
   for. */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calendar-fixed {
  margin: 0.25rem 0 0;
  color: var(--rst-text-muted);
}

/* Who a request goes to, under the request form's title. */
.who-decides {
  margin: 0 0 1rem;
}

/* A rule Admin may go past with a reason, such as an overdraw. */
.warning-line {
  font-weight: 600;
}

/* Admin's actions on someone else's request stand apart from theirs. */
.admin-box {
  border-style: dashed;
}

/* Import leave (D9): every row of the file, the bad field marked in
   words beside it as well as by colour. */
.import-rows-wrap {
  overflow-x: auto;
}

.import-rows td,
.import-rows th {
  vertical-align: top;
  font-size: 0.9rem;
}

.import-rows .import-bad {
  outline: 2px solid var(--rst-tone-negative-fg, currentColor);
  outline-offset: -2px;
}

.import-problem {
  margin: 0.35rem 0 0;
  max-width: 28rem;
}

.import-says {
  margin-top: 0.25rem;
  color: var(--rst-text-muted);
}


.table-links a + a {
  margin-left: 0.5rem;
}

/* The import's guide folds away, so the upload stays in view; a native
   disclosure, so it needs no script and reads right to a screen reader. */
.import-help {
  margin-top: 0.75rem;
}

.import-help > summary {
  cursor: pointer;
  color: var(--rst-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  width: fit-content;
}

.import-help[open] > summary {
  margin-bottom: 0.75rem;
}


/* The top bar for everyone, and for managers and Admins their sections
   down the left (DEC-36). The bar and the frame share one width. */
[rst-shell-topbar] [rst-shell-bar],
.app-frame {
  max-inline-size: 72rem;
  margin-inline: auto;
}

[rst-shell-topbar] .bar-profile {
  margin-inline-start: auto;
  position: relative;
}

[rst-shell-topbar] .bar-profile > [rst-dropdown-menu] {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* Every page fills the same column, whatever it holds, so moving
   between sections never shifts the page sideways. The framework
   centres a page with auto margins, which inside this frame would shrink
   each one to its own content. */
.app-frame > [rst-page] {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
}

.side-nav {
  display: none;
}

.side-nav a,
[rst-shell-nav] a {
  border-radius: var(--rst-radius-sm, 6px);
  color: var(--rst-text);
  text-decoration: none;
}

/* Where the reader is: bold, one quiet cue that isn't colour; screen
   readers hear aria-current. */
.side-nav a[aria-current="page"],
[rst-shell-nav] a[aria-current="page"] {
  font-weight: 600;
}

@media (min-width: 800px) {
  .has-sections .app-frame {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block-start: 1.5rem;
    position: sticky;
    inset-block-start: 0;
    align-self: start;
  }

  .side-nav a {
    padding: 0.5rem 0.75rem;
  }

  .side-nav a:hover {
    background: var(--rst-accent-soft);
  }

  /* On a wide screen the sections are down the side, so the bar's own
     copy and its Menu button stay hidden. */
  .has-sections [rst-shell-bar] [rst-shell-tail],
  .has-sections [rst-shell-bar] [rst-shell-menu] {
    display: none;
  }
}

/* Asking for leave is one task: a narrower page that reads as a form,
   with a way back to My leave. */
.task-page {
  max-inline-size: 42rem;
}

/* A leave account scrolls sideways inside its box on a phone, rather
   than hiding its balance column off the edge. */
.statement-wrap {
  overflow-x: auto;
}


/* Any box holding a table scrolls sideways inside itself on a phone,
   rather than pushing the whole page wider than the screen. */
[rst-box]:has(> table.statement) {
  overflow-x: auto;
  position: relative; /* keeps screen-reader-only labels inside it */
}

/* Every section page has the same three bands, in the same places, so
   moving between sections changes only what's in them (DEC-36): the
   heading row (title, one-line subtitle, the main button on the right),
   the toolbar (tabs or a summary on the left, small actions on the
   right) and then the page's main box. */
[rst-page-header] {
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  min-block-size: 4.5rem;
  margin-block-end: var(--rst-sp-4);
}

[rst-page-header-sub] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  box-sizing: border-box;
  min-block-size: 2.5rem;
  margin-block: 0 var(--rst-sp-4);
  color: var(--rst-text-muted);
  font-size: var(--rst-fs-sm);
}

.page-toolbar [rst-seg-tabs] {
  margin: 0;
}

.page-toolbar-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline-start: auto;
}

.page-toolbar-end form {
  margin: 0;
}

@media (max-width: 600px) {
  [rst-page-header] {
    flex-wrap: wrap;
  }

  [rst-page-header-sub] {
    white-space: normal;
  }
}


/* Requests' filters fold behind a button at the end of its toolbar, so
   the list starts where every other section's main box does. */
.filters {
  position: relative;
}

.filters > summary {
  list-style: none;
  cursor: pointer;
}

.filters > summary::-webkit-details-marker {
  display: none;
}

.filters[open] {
  display: block;
  flex-basis: 100%;
}

.filters[open] > summary {
  display: flex;
  inline-size: fit-content;
  margin-inline-start: auto;
}

.filters-panel {
  margin-block-start: 0.5rem;
  color: var(--rst-text);
}

/* Who else is off then (R-W1): a warning to read, never a block. */
.clash-line {
  color: var(--rst-text-muted);
}

/* Selects are drawn here, not by the browser: Safari ignores a native
   select's height and Chrome's arrow touches its border, so neither
   matched the 44px date and text fields beside them. The chevron is
   Lucide's, in the muted text colour the date field's icon uses. */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a79f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a79f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
select[rst-input] {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-chevron);
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-inline-end: 2.5rem;
}
/* High-contrast modes drop background images; the native arrow comes
   back so the control still reads as a choice. */
@media (forced-colors: active) {
  select[rst-input] {
    -webkit-appearance: auto;
    appearance: auto;
  }
}

/* Filters sit on one grid of equal columns, so every field's edges line
   up from row to row: three across on a wide screen, fewer as it
   narrows. */
.filter-grid {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  margin: 0.75rem 0;
}
.filter-grid > [rst-field] {
  margin: 0;
}
.filter-grid [rst-input] {
  inline-size: 100%;
}
.filter-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

/* A task's form is one column of one width: every field fills it, and a
   date sits beside its half day as a pair, so no row is wider or
   narrower than the rest. On a phone the pair stacks. */
.task-form [rst-input] {
  inline-size: 100%;
}
.task-form .field-pair {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; /* the form's own gap spaces it like any other field */
}
@media (max-width: 30rem) {
  .task-form .field-pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
}
.task-form .field-pair > [rst-field] {
  margin: 0;
}
.task-form {
  max-inline-size: 40rem;
}