/**
 * assets/styles/ds/base.css
 *
 * The document layer: reset, typography, focus, and the direction-neutral
 * defaults everything else is built on.
 *
 * WHY LOGICAL PROPERTIES, EVERYWHERE, WITHOUT EXCEPTION
 * This product ships in ten languages, two of which run right-to-left. The old
 * answer was styles/rtl.css: a 16KB sheet that waits for the Arabic page and
 * then flips `left` to `right` by hand, rule by rule. Every new screen has to
 * remember to add its flip there, and the ones that forgot are the reason
 * buttons sit on the wrong edge on Arabic pages today.
 *
 * `margin-inline-start` needs no flip and no sheet. It is already correct in
 * both directions. So: no `left`, `right`, `margin-left`, `padding-right`,
 * `text-align: left|right` or `border-left` below this line -- the flipped
 * spelling is the bug, not the fix.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* ---------------------------------------------------------------------- *
 * TYPE
 * Headings take the display face; body and data take the UI face. Arabic gets
 * no letter-spacing at any size -- the script joins, and spacing it apart is
 * not a stylistic choice but a spelling error.
 * ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
  letter-spacing: 0;
}

h1 { font-size: var(--t-3xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); font-weight: var(--fw-semi); }
h6 { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--ink-muted); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

/* Running prose stops at a readable measure even inside a wide container. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote { max-width: var(--measure); }
.prose { line-height: var(--lh-loose); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

small, .text-meta { font-size: var(--t-xs); color: var(--ink-muted); }
strong, b { font-weight: var(--fw-semi); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: .9em;
  direction: ltr;
  unicode-bidi: embed;
}
code {
  background: var(--surface-3);
  padding: .1em .38em;
  border-radius: var(--r-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
}

/* Every figure that lines up in a column lines up. Arabic-Indic or Western,
   a register of times and a ledger of amounts both need one advance width. */
.num, td.num, .table td.num, time, .amount, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------- *
 * MEDIA
 * ---------------------------------------------------------------------- */

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { background: var(--surface-3); }   /* a broken or slow image is not a white hole */

/* ---------------------------------------------------------------------- *
 * FOCUS
 * The purchased theme removed the focus ring globally to make the mouse look
 * tidy. A nursery's register is worked at speed with a keyboard, and a ring
 * that cannot be seen is a screen that cannot be operated without a mouse.
 *
 * :focus-visible, so the ring appears for the keyboard and not on every click.
 * ---------------------------------------------------------------------- */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline-offset: 1px;
  box-shadow: var(--ring);
}

::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ink);
}

/* ---------------------------------------------------------------------- *
 * THE SKIP LINK
 * Present in the markup already, but positioned off-screen with no way back.
 * It must return on focus or it serves nobody.
 * ---------------------------------------------------------------------- */

.skip-to-content {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: var(--z-toast);
  background: var(--accent);
  color: var(--ink-on-brand);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transition: inset-block-start var(--dur-2) var(--ease);
}
.skip-to-content:focus {
  inset-block-start: 0;
  color: var(--ink-on-brand);
}

/* ---------------------------------------------------------------------- *
 * SCROLLBARS -- themed, because a bright scrollbar beside a dark sidebar is
 * the detail that makes a dark theme look unfinished.
 * ---------------------------------------------------------------------- */

* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-faint) 45%, transparent);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* ---------------------------------------------------------------------- *
 * MOTION
 * Honour the viewer who asked for less of it. This is a setting people turn on
 * because movement makes them ill, not a preference to be overridden.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- *
 * SMALL, HONEST UTILITIES
 * A handful only. A utility layer large enough to build a page out of is a
 * second design system competing with this one.
 * ---------------------------------------------------------------------- */

.u-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.u-wrap-wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--s-5); }
.u-stack > * + * { margin-block-start: var(--s-4); }
.u-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.u-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.u-grow { flex: 1 1 auto; min-width: 0; }
.u-muted { color: var(--ink-muted); }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Visible to a screen reader, invisible to everyone else. Used for the names
   of icon-only controls, of which this codebase has a great many. */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Anything that can outgrow its column scrolls inside itself. The page body
   never scrolls sideways -- on a phone that is how a layout is lost. */
.u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ---------------------------------------------------------------------- *
 * PRINT
 * Registers, invoices and inspection reports are printed and filed. The
 * chrome has no business on the paper.
 * ---------------------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .ds-shell__nav, .ds-shell__top,
  .no-print, .btn, .dataTables_filter, .dataTables_paginate,
  .dataTables_length, .accessibility-fab { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .card, .ds-card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  thead { display: table-header-group; }
  tr, img { break-inside: avoid; }
}