/* The office brand: the only corner sizes, text sizes, meaning colours and button kinds a
   new screen may use. Rules and reasons: docs/brand.md. Picked by Hugo on 2026-10-13.
   Colours come from the theme (color-themes.css); this file only names them by job. */
:root {
  /* Corners. --brand-r-square is a deliberate rule-break: something that must grab the eye. */
  --brand-r-sm: 8px;      /* buttons, tags, chips, small badges */
  --brand-r-md: 12px;     /* typing boxes, rows */
  --brand-r-lg: 20px;     /* panels, cards, windows */
  --brand-r-square: 0;

  /* Text ladder. Nothing in between. */
  --brand-t-xs: 11px;     /* small print: timestamps, hints, captions */
  --brand-t-sm: 13px;     /* normal text, buttons, typing boxes */
  --brand-t-md: 15px;     /* row titles: a task, a ticket, an invoice */
  --brand-t-lg: 19px;     /* panel titles */
  --brand-t-xl: 25px;     /* page titles */
  --brand-t-hero: 34px;   /* the one big number on a card (may go larger) */
  --brand-w-normal: 400;
  --brand-w-strong: 600;
  --brand-font: var(--glass-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  /* Controls: one height for every button and typing box. */
  --brand-control-h: 32px;

  /* Window widths: five sizes, grouped by what the window shows (docs/brand.md). */
  --brand-win-md: 640px;      /* Menu, Me, Controls, confirm boxes (Tall is this width, full height) */
  --brand-win-lg: 880px;      /* Projects, Board */
  --brand-win-wide: 1040px;   /* My Desk */
  --brand-win-full: 1280px;   /* Reports, Billing */
  --brand-win-max-h: 88vh;

  /* Colours by job. All follow the person's theme and light/dark. */
  --brand-ink: var(--palette-ink, var(--glass-ink));
  --brand-muted: var(--palette-muted, var(--glass-muted));
  --brand-accent: var(--palette-accent, var(--glass-accent));
  --brand-accent-2: var(--palette-accent-2, #0f7d7a); /* second colour: sorts things by eye (tags) */
  --brand-line: var(--palette-line, var(--glass-line));
  --brand-page: var(--palette-page, #eef2f7);
  --brand-panel: var(--palette-panel, #fbfcff);
  --brand-row: var(--palette-row, #e3e9f3);
  --brand-fill: var(--palette-selected, #d3def3);

  /* The three meaning colours. Same meaning in every theme; light/dark tuned. */
  --brand-good: var(--glass-success, #237449);     /* paid, done, linked */
  --brand-warn: var(--palette-warn, #945326);      /* needs attention, overdue */
  --brand-danger: var(--glass-danger, #b52c3c);    /* stop, delete, can't undo */
  --brand-good-soft: color-mix(in srgb, var(--brand-good) 14%, transparent);
  --brand-warn-soft: color-mix(in srgb, var(--brand-warn) 14%, transparent);
  --brand-danger-soft: color-mix(in srgb, var(--brand-danger) 12%, transparent);
}

/* Buttons: four kinds, one size. `html` prefix so panel rules like `.modal-panel button`
   don't win by specificity. */
html .brand-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--brand-control-h); min-height: var(--brand-control-h); padding: 0 14px;
  border-radius: var(--brand-r-sm); border: 1px solid transparent;
  font: var(--brand-w-normal) var(--brand-t-sm)/1 var(--brand-font); letter-spacing: 0; text-transform: none;
  white-space: nowrap; cursor: pointer; box-sizing: border-box;
  transition: background-color .12s, border-color .12s, color .12s;
}
html .brand-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
/* Unavailable: dimmed and explained (put the reason in `title`), never hidden. */
html .brand-btn:disabled, html .brand-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Main: the one action the person most likely wants. At most one per row or dialog. */
html .brand-btn-main { background: var(--brand-fill); color: var(--brand-accent); font-weight: var(--brand-w-strong); }
html .brand-btn-main:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-fill) 80%, var(--brand-accent)); }

/* Second: every other action. */
html .brand-btn-second { background: transparent; color: var(--brand-ink); border-color: var(--brand-line); }
html .brand-btn-second:hover:not(:disabled) { background: var(--brand-row); }

/* Quiet: small closes, toggles, "see more". Just text. */
html .brand-btn-quiet { background: none; color: var(--brand-muted); padding: 0 8px; }
html .brand-btn-quiet:hover:not(:disabled) { color: var(--brand-ink); background: var(--brand-row); }

/* Glass: only on things floating over the 3D world. */
html .brand-btn-glass {
  background: var(--glass-row); color: var(--glass-ink); border-color: var(--glass-line);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
html .brand-btn-glass:hover:not(:disabled) { background: var(--glass-hover); }

/* Danger: add to any kind for Stop, Delete, anything that can't be undone. */
html .brand-btn.brand-danger { color: var(--brand-danger); }
html .brand-btn-second.brand-danger, html .brand-btn-glass.brand-danger { border-color: var(--brand-danger); }
html .brand-btn-main.brand-danger { background: var(--brand-danger-soft); }

/* Typing boxes: same height and corners as buttons. */
html .brand-field {
  height: var(--brand-control-h); padding: 0 10px; box-sizing: border-box;
  border-radius: var(--brand-r-md); border: 1px solid var(--brand-line);
  background: var(--glass-field, var(--brand-panel)); color: var(--brand-ink);
  font: var(--brand-w-normal) var(--brand-t-sm) var(--brand-font);
}
html textarea.brand-field { height: auto; min-height: 72px; padding: 8px 10px; line-height: 1.45; }
html .brand-field:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* Tags: small labels such as Paid, Overdue, Request. */
html .brand-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: var(--brand-r-sm); font: var(--brand-w-strong) var(--brand-t-xs)/1 var(--brand-font);
  background: var(--brand-row); color: var(--brand-muted);
}
html .brand-tag.brand-good { background: var(--brand-good-soft); color: var(--brand-good); }
html .brand-tag.brand-warn { background: var(--brand-warn-soft); color: var(--brand-warn); }
html .brand-tag.brand-danger { background: var(--brand-danger-soft); color: var(--brand-danger); }
html .brand-tag.brand-accent { background: color-mix(in srgb, var(--brand-accent) 14%, transparent); color: var(--brand-accent); }
html .brand-tag.brand-accent-2 { background: color-mix(in srgb, var(--brand-accent-2) 14%, transparent); color: var(--brand-accent-2); }

/* Windows: five sizes. A window fits its content and scrolls inside past --brand-win-max-h;
   Tall and Full always take (almost) the whole height. Solid by default — glass only for game things. */
html :is(.brand-win-md, .brand-win-tall, .brand-win-lg, .brand-win-wide, .brand-win-full) {
  max-width: calc(100vw - 32px); max-height: var(--brand-win-max-h); box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--brand-page); color: var(--brand-ink); border: 1px solid var(--brand-line); border-radius: var(--brand-r-lg);
}
html .brand-win-md { width: var(--brand-win-md); }
html .brand-win-tall { width: var(--brand-win-md); height: var(--brand-win-max-h); }
html .brand-win-lg { width: var(--brand-win-lg); }
html .brand-win-wide { width: var(--brand-win-wide); }
html .brand-win-full { width: var(--brand-win-full); height: var(--brand-win-max-h); }
html .brand-win-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 24px; }

/* The breadcrumb bar on top of every window: logo, clickable path, the last step bold, × at the right. */
html .brand-crumbs {
  flex: none; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 16px;
  background: var(--brand-panel); border-bottom: 1px solid var(--brand-line);
  font: var(--brand-w-normal) var(--brand-t-md) var(--brand-font); color: var(--brand-muted); min-width: 0;
}
html .brand-crumbs :is(a, button.brand-crumb) {
  color: var(--brand-muted); text-decoration: none; background: none; border: 0; font: inherit;
  padding: 2px 4px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
html .brand-crumbs :is(a, button.brand-crumb):hover { color: var(--brand-ink); background: var(--brand-row); }
html .brand-crumbs .brand-crumb-sep { color: var(--brand-line); }
html .brand-crumbs .brand-crumb-here { color: var(--brand-ink); font-weight: var(--brand-w-strong); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .brand-crumbs .brand-crumb-close { margin-left: auto; width: var(--brand-control-h); padding: 0; font-size: 18px; }

/* Section labels: a title in normal capitals; an optional lighter sentence beside it. */
html .brand-section { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
html .brand-section:first-child { margin-top: 0; }
html .brand-section > :is(h2, h3, h4, strong) { margin: 0; font-size: var(--brand-t-md); font-weight: var(--brand-w-strong); color: var(--brand-ink); }
html .brand-section > p { margin: 0; font-size: var(--brand-t-sm); color: var(--brand-muted); }
/* Small spaced capitals: table column headings only. */
html .brand-colhead { font-size: var(--brand-t-xs); font-weight: var(--brand-w-strong); letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-muted); }

/* Rows: three kinds of list, one inside. Line = read or plan, Card = pick or open, Live = happening now. */
html .brand-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; color: var(--brand-ink); }
html .brand-item-main { flex: 1; min-width: 0; }
html .brand-item-title { font-size: var(--brand-t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .brand-item-detail { font-size: var(--brand-t-sm); color: var(--brand-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .brand-item-meta { font-size: var(--brand-t-sm); color: var(--brand-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
html .brand-rows-line > .brand-item { padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--brand-line); }
html .brand-rows-line > .brand-item:first-child { border-top: 1px solid var(--brand-line); }
html :is(.brand-rows-card, .brand-rows-live) { display: flex; flex-direction: column; gap: 8px; }
html .brand-rows-card > .brand-item { background: var(--brand-panel); border: 1px solid var(--brand-line); border-radius: var(--brand-r-md); }
html .brand-rows-live > .brand-item { background: var(--brand-fill); border: 1px solid var(--brand-accent); border-radius: var(--brand-r-md); }
html .brand-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); flex: none; }
/* A folder: a card with a tinted header row and line rows inside. */
html .brand-group { border: 1px solid var(--brand-line); border-radius: var(--brand-r-md); overflow: hidden; background: var(--brand-panel); }
html .brand-group + .brand-group { margin-top: 8px; }
html .brand-group > .brand-item { background: var(--brand-row); }
html .brand-group > .brand-item .brand-item-title { font-weight: var(--brand-w-strong); }
html .brand-group > .brand-rows-line { padding: 0 14px; }
html .brand-group > .brand-rows-line > .brand-item:first-child { border-top: 0; }
html .brand-group > .brand-rows-line > .brand-item:last-child { border-bottom: 0; }