/* ════════════════════════════════════════════════════════════
   Mothy UI

   Mothy's own components. Deep forest greens, parchment creams, one
   burnt-orange accent. Poppins for headings, Hanken Grotesk for body
   and UI, IBM Plex Mono for evidence and metadata.

   The tokens and the fonts are no longer defined here: they live in
   @mothy/design and are imported below, so this app and the carer app
   share one palette. Do not invent colours here. Every component uses
   a semantic alias, and every alias resolves to a palette value in the
   package. If a component needs a colour that is not a token, the
   token is missing, not the colour.
   ════════════════════════════════════════════════════════════ */

@import url('/assets/fonts.css');

/* The palette, type scale, spacing, radii, shadows and motion come from
   @mothy/design, so Mothy and the carer app cannot drift apart. The served
   copy at /assets/tokens.css is generated by `npm run design:sync` and CI
   fails if it has drifted from the package. To change a token, edit
   packages/design/tokens.css, not the copy and not this file. */
@import url('/assets/tokens.css');

/* The reset, typography and the components both products share: the dark left
   rail, cards, buttons, badges and chips. Everything below this line is Mothy's
   own, and nothing below repeats a selector from the package. A selector in
   both files with different bodies is a collision, not a shared component, so
   it lives in one app or the other: this file imports the package, so a repeat
   would not sit there harmlessly, it would win per property and inherit the
   rest silently. `npm run design:check` enforces that they stay disjoint. */
@import url('/assets/base.css');

/* What is left here is what the pages still loading this file reach for:
   automations, automations-advanced, review and login. Desk's own screens are
   styled by desk.css. The rules for the old personal screens (Today, Inbox,
   Tasks, Approvals, Conversations, What Mothy knows, the Ask rail) went with
   them in T-604, after T-603 removed the screens. */

/* ════════════════════════════════════════
   Base
   ════════════════════════════════════════ */

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

/* Links are base.css's: design:check refuses a selector defined in both. */

::selection {
  background: var(--orange-100);
  color: var(--green-900);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════
   Page layout
   ════════════════════════════════════════ */

.screen {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 860px;
}

.screen-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.screen-head h1 {
  margin: 8px 0 0;
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  color: var(--green-900);
}

.screen-head p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════
   Components
   ════════════════════════════════════════ */

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.dot--muted {
  background: var(--green-300);
}

.dot--success {
  background: var(--success);
}

.dot--warning {
  background: var(--warning);
}

/* Red and clay are reserved. In the care flavour they mean safeguarding and
   nothing else, so nothing routine may reach for them. */
.dot--danger {
  background: var(--danger);
}

.pill {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--green-800);
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  flex: none;
}

.pill--caps {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
  padding: 4px 10px;
}

.pill--tag {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--green-700);
  padding: 3px 8px;
}

.pill--accent {
  color: var(--orange-600);
  background: var(--orange-100);
}

.pill--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--green-800);
  padding: 3px 9px;
}

/* The draft or preview panel. Sunk against the card so it reads as the thing
   being reviewed rather than more of the page. */
.preview {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.preview p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
  white-space: pre-wrap;
}

.empty {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Form fields (login) ── */

.field {
  display: block;
  margin-bottom: var(--space-4);
}

.field input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-body);
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}

.field input:focus-visible {
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* The shared rail in base.css narrows to icons on a small window. */
@media (max-width: 720px) {
  :root {
    --nav-width: 62px;
  }
}