/* ui.css — the shared component library's styles (internal/ui): the sidebar's
   parts, the side panel (drawer, sheet, .detail head and rows) and the history
   companion. STRUCTURE ONLY: no colour, radius or font is written here; each
   comes from a token the app defines in its own stylesheet, loaded AFTER this
   file, so an app can still adjust a component on top.

   Tokens an app must define:
     --action --action-hover --aside-w --brand --brand-soft --brand-tint --canvas --ctl-fs --ctl-fs-sm --ctl-h --ctl-h-sm --danger --danger-soft --focus --font-head --font-mono --ink --inverse --inverse-ink --line --link --muted --nav-accent --nav-active --nav-fg --nav-head --on-action --on-brand --radius-sm --white

   Optional: --nav-active-ink, the text on the active sidebar entry
   (defaults to --on-brand); --overlay, a dialog's backdrop (defaults to the
   Intranet's). --panel-left is set by drawer.js.

   The rules were moved verbatim from intranet.css (its order kept), so the
   Intranet renders exactly as before. Add a rule here only if it names
   component classes alone; anything about an app's content stays in the
   app's stylesheet. */



/* --- Sidebar --------------------------------------------------------------- */
/* z-index 120: position sticky makes the sidebar its own stacking context,
   so without one the flyouts inside it (z 160 there) painted UNDER any
   positioned element of the page, e.g. the cockpit's hero. 120 keeps it
   under the drawers (150), the sheet (160) and the palette (200). */
.sidebar {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; z-index: 120;
  width: 260px; flex-shrink: 0; box-sizing: border-box;
  background: var(--inverse); color: var(--inverse-ink);
  display: flex; flex-direction: column; gap: 8px; padding: 16px 12px;
}

.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }


.nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; margin-top: 6px; overflow-y: auto; }

.nav__sep { height: 1px; background: rgba(255, 255, 255, .10); margin: 8px 10px; }

.nav__group { display: flex; flex-direction: column; gap: 2px; }

.nav__group + .nav__group { margin-top: 12px; }

.nav__grouphead {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  color: var(--nav-head); padding: 2px 12px 3px;
}

.nav__tab {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); color: var(--nav-fg); transition: background .15s, color .15s;
  text-decoration: none; /* whatever the app does with links in its pages */
}

.nav__tab .ico { opacity: .85; }

.nav__tab:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.nav__tab--active,
.nav__tab--active:hover { background: var(--nav-active); color: var(--nav-active-ink, var(--on-brand)); font-weight: 500; }


/* Brand row: logo/name on the left, the notifications bell on the right. */
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.brandbar__actions { display: flex; align-items: center; gap: 4px; }

.bell {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  color: var(--nav-fg); transition: background .15s, color .15s;
  /* reset so a <button>.bell (the theme toggle) matches the <a>.bell bell —
     no default button chrome (white box) */
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}

.bell:hover, .bell--active { color: #fff; background: rgba(255, 255, 255, .09); }

.bell .ico { width: 18px; height: 18px; }

/* Clear "new notification" dot — amber reads against the dark-green sidebar. */
.bell__dot {
  position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #F0A03C; box-shadow: 0 0 0 2px var(--inverse);
}


.user {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: inherit; text-decoration: none;
  padding: 4px 6px; margin: -4px -6px 0; border-radius: var(--radius-sm);
  transition: background .15s;
}

a.user:hover { background: rgba(255, 255, 255, .07); }

.user__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--brand); color: var(--on-brand);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}

.user__name { color: #e2e3ef; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An overlay panel takes focus as the dialog itself when it opens; the ring
   belongs on the controls inside it, not around the whole panel. */
#drawer-body:focus, #sheet-body:focus { outline: none; }

.thist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.thist__row { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; }

.thist__when { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }

.thist__what { min-width: 0; }


/* ---------------------------------------------------------------------------
   Cmd+K command palette + sidebar search trigger
   --------------------------------------------------------------------------- */
.navsearch {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 10px; padding: 8px 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm); color: rgba(255, 255, 255, .78);
  font: inherit; font-size: 13px; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}

.navsearch:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24); }

.navsearch__icon { flex: none; opacity: .8; }

.navsearch__label { flex: 1; text-align: left; }

.navsearch__kbd {
  flex: none; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px; padding: 1px 5px; color: rgba(255, 255, 255, .7);
}


.drawer { position: fixed; inset: 0; z-index: 150; opacity: 1; transition: opacity .22s ease, visibility .22s ease; }

/* Stays in the DOM (display:block) while hidden so open AND close both animate;
   visibility + pointer-events make it fully inert when closed, so it never
   intercepts clicks. Toggling the `hidden` attribute drives the transition. */
.drawer[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; }

.drawer__scrim { position: absolute; inset: 0; background: rgba(20, 35, 26, .42); }

.drawer__panel {
  position: absolute; top: 0; right: 0; width: min(520px, 96vw); height: 100%;
  overflow-y: auto; overscroll-behavior: contain; background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 44px rgba(20, 35, 26, .16); padding: 24px 26px 36px;
  transform: translateX(0); transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}

.drawer[hidden] .drawer__panel { transform: translateX(100%); }

.drawer__loading { color: var(--muted); padding: 30px 6px; font-size: 14px; }

/* A request is replacing an open panel's content: keep it, just signal it. */
.drawer--busy .drawer__panel, .sheet--busy .sheet__panel { cursor: progress; }

.drawer--busy #drawer-body, .sheet--busy #sheet-body { opacity: .7; transition: opacity .15s .12s; }

[data-theme="dark"] .drawer__scrim { background: rgba(0, 0, 0, .62); }

[data-theme="dark"] .drawer__panel { box-shadow: -14px 0 44px rgba(0, 0, 0, .5); }


.detail__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 2px; }

.detail__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--link); }

.detail__title { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.2; margin: 2px 0 0; }

.detail__sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.detail__x {
  margin-left: auto; flex: none; border: 1px solid var(--line); background: transparent;
  border-radius: 8px; width: 30px; height: 30px; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer;
}

.detail__x:hover { border-color: var(--brand); color: var(--link); }

/* A glyph ACTION beside that close × — same 30px box, minus the margin-left:auto
   that pushes the × to the edge: the two are grouped in one .modal__head-actions,
   so only the group needs pushing, and two auto margins would split the free
   space between them instead of keeping the pair together. */
.detail__act {
  flex: none; border: 1px solid var(--line); background: transparent;
  border-radius: 8px; width: 30px; height: 30px; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer;
}

.detail__act:hover { border-color: var(--brand); color: var(--link); }

.detail__act .ico { width: 15px; height: 15px; vertical-align: -0.2em; }

/* A header's actions as one group pushed to the edge — the × stays last. */
.detail__tools { margin-left: auto; flex: none; display: flex; gap: 6px; }

.detail__tools .detail__x { margin-left: 0; }

/* Icons leading a detail key or a section label (cadence's ADR 0136 pattern). */
.detail__k > .ico { width: 13px; height: 13px; margin-right: 6px; vertical-align: -0.15em; opacity: .85; }

.detail__label > .ico, .detail__label > span > .ico { width: 13px; height: 13px; margin-right: 4px; vertical-align: -0.18em; color: var(--link); }

.detail__section { margin-top: 20px; }

.detail__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }

.detail__row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }

.detail__row:first-of-type { border-top: none; }

.detail__k { color: var(--muted); flex: none; min-width: 108px; }

.detail__v { font-weight: 500; min-width: 0; }

.detail__empty { color: var(--muted); font-size: 13px; padding: 4px 0; }


/* --- Sheet: a big CENTERED modal (positions, and a project's deliverable) --- */
/* The topmost overlay layer (z 160), so it stacks on a drawer or a page — a
   position can open from a drawer, a deliverable from a project page. */
.sheet { position: fixed; inset: 0; z-index: 160; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 18px; overflow-y: auto; opacity: 1; transition: opacity .2s ease, visibility .2s ease; }

/* Same open/close symmetry as the drawer — kept displayed but inert when closed. */
.sheet[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }

.sheet__scrim { position: fixed; inset: 0; background: rgba(20, 35, 26, .46); }

.sheet__card {
  position: relative; width: min(920px, 100%); background: var(--white);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(20, 35, 26, .28); padding: 26px 30px 32px;
  transform: translateY(0) scale(1); transition: transform .2s ease;
}

.sheet[hidden] .sheet__card { transform: translateY(12px) scale(.985); }

.sheet__loading { color: var(--muted); padding: 40px 6px; font-size: 14px; }

[data-theme="dark"] .sheet__scrim { background: rgba(0, 0, 0, .66); }

[data-theme="dark"] .sheet__card { box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.detail__label,
.detail__eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.drawer__panel:has([data-policy-panel]) { width: min(780px, 96vw); }

.detail__act[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--link); }


/* ===========================================================================
   SIDEBAR FOLD (docs/adr/0113, after Cadence's 0133).
   Desktop: body.app--navfold folds the 260px sidebar to a 68px icon rail.
   Phone (<= 760px): the rail is the resting state; body.app--navopen lays the
   full sidebar over the page with a scrim. The rail rules are written twice,
   once per breakpoint, because a media query cannot sit in a selector list.
   =========================================================================== */
.sidebar { transition: width .18s ease, padding .18s ease; }

.sidebar__footrow { display: flex; align-items: center; gap: 6px; }

.navfold {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer;
  background: none; border: 1px solid rgba(255, 255, 255, .16); color: var(--nav-fg); padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}

.navfold:hover { color: #fff; background: rgba(255, 255, 255, .07); border-color: var(--nav-accent); }

.navfold:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; }

.navfold .ico { width: 17px; height: 17px; transition: transform .18s ease; }

.navfold .nav__label { display: none; }

.navscrim { display: none; }
@media (min-width: 761px) {

  .app--navfold .sidebar { width: 68px; padding: 16px 10px; }

  .app--navfold .brandbar { flex-direction: column; gap: 6px; }

  .app--navfold .brandbar__actions { flex-direction: column; gap: 2px; }
  .app--navfold .nav__label,
  .app--navfold .nav__grouphead,
  .app--navfold .navsearch__label,
  .app--navfold .navsearch__kbd,
  .app--navfold .user__name { display: none; }

  .app--navfold .navsearch { justify-content: center; padding: 9px 0; }

  .app--navfold .nav__tab { justify-content: center; padding: 9px 0; }

  .app--navfold .nav__tab .ico { width: 17px; height: 17px; }

  .app--navfold .nav__group + .nav__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .10); }

  .app--navfold .user { justify-content: center; margin: 0; padding: 4px 0; }

  .app--navfold .sidebar__footrow { flex-direction: column; }

  .app--navfold .navfold .ico { transform: scaleX(-1); }
}
@media (max-width: 760px) {

  .sidebar { width: 64px; padding: 14px 8px; z-index: 145; }

  .app:not(.app--navopen) .brandbar { flex-direction: column; gap: 6px; }

  .app:not(.app--navopen) .brandbar__actions { flex-direction: column; gap: 2px; }
  .app:not(.app--navopen) .nav__label,
  .app:not(.app--navopen) .nav__grouphead,
  .app:not(.app--navopen) .navsearch__label,
  .app:not(.app--navopen) .navsearch__kbd,
  .app:not(.app--navopen) .user__name { display: none; }

  .app:not(.app--navopen) .navsearch { justify-content: center; padding: 9px 0; }

  .app:not(.app--navopen) .nav__tab { justify-content: center; padding: 9px 0; }

  .app:not(.app--navopen) .nav__group + .nav__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .10); }

  .app:not(.app--navopen) .user { justify-content: center; margin: 0; padding: 4px 0; }

  .app:not(.app--navopen) .sidebar__footrow { flex-direction: column; }

  .app:not(.app--navopen) .navfold .ico { transform: scaleX(-1); }

  /* Open: the full sidebar over the page, the rail's width held for the
     content underneath so nothing jumps. */
  .app--navopen .sidebar { position: fixed; left: 0; top: 0; width: 260px; padding: 16px 12px; box-shadow: 12px 0 40px rgba(0, 0, 0, .35); }

  .app--navopen .navscrim { display: block; position: fixed; inset: 0; z-index: 144; background: rgba(20, 35, 26, .46); }
}

.drawer.drawer--full .drawer__panel { left: var(--panel-left, 0px); width: auto; border-left: 0; box-shadow: none; transition: transform .24s cubic-bezier(.32, .72, 0, 1), left .2s ease; }

.sheet.sheet--full { padding: 0; }

.sheet.sheet--full .sheet__card { position: fixed; top: 0; right: 0; bottom: 0; left: var(--panel-left, 0px); width: auto; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; }
@media (max-width: 760px) {
 .drawer.drawer--full .drawer__panel, .sheet.sheet--full .sheet__card { left: 0; }
}

/* The content keeps a readable line length in the wider space. */
.drawer--full #drawer-body > *, .sheet--full #sheet-body > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.drawer__aside {
  position: absolute; top: 0; right: 0; width: var(--aside-w); max-width: 100vw; height: 100%;
  overflow-y: auto; overscroll-behavior: contain; background: var(--white);
  border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(20, 35, 26, .10);
  padding: 22px 22px 30px; z-index: 1;
}

.drawer__aside[hidden] { display: none; }

.drawer--aside .drawer__panel { right: var(--aside-w); transition: transform .24s cubic-bezier(.32, .72, 0, 1), right .2s ease, left .2s ease; }

.drawer__asidehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

.drawer__asidetitle { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 860px) {

  .drawer--aside .drawer__panel { right: 0; }

  .drawer__aside { width: min(var(--aside-w), 100vw); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer__panel,
  .drawer__aside,
  .sheet__card { transition: none !important; animation: none !important; }
}


/* Sidebar sub-menus (0179, navflyout.js). Hidden unless the script enabled
   them (.nav--flyouts: a wide screen with a mouse). The open panel is fixed
   to the right of the sidebar, level with its entry. */
.nav__flyout { display: none; }

.nav--flyouts .nav__flyout {
  display: block; position: fixed; z-index: 160; min-width: 200px; max-width: 280px;
  padding: 6px; border-radius: 12px; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08);
  visibility: hidden; opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.nav--flyouts .nav__flyout.is-open {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* A bridge across the gap to the sidebar, so the pointer can cross it. */
.nav--flyouts .nav__flyout::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }

.nav__flyhead { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.nav__flylink { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav__flylink:hover { background: var(--canvas); color: var(--ink); }

.nav__flylink:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.nav__flylink[aria-current="page"] { background: var(--brand-soft); color: var(--link); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {

  .nav--flyouts .nav__flyout, .nav--flyouts .nav__flyout.is-open { transform: none; transition: none; }
}


/* A panel's history in the companion panel (ADR 0162, 0195): sections of
   one .thist list each, the same rows as a task's history. */
.histgroup + .histgroup { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

.histgroup__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.thist__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }


/* A panel loading: a skeleton of one, shimmering. */
.panelskel { display: flex; flex-direction: column; gap: 12px; padding: 6px 2px 0; }

.panelskel__row { display: flex; gap: 8px; }

.panelskel__bar {
  display: block; height: 12px; width: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--canvas) 0%, var(--brand-tint) 40%, var(--canvas) 80%);
  background-size: 300% 100%; animation: panelskel-shimmer 1.4s ease-in-out infinite;
}

.panelskel__bar--eyebrow { width: 22%; height: 10px; }

.panelskel__bar--title { width: 68%; height: 22px; margin-bottom: 6px; }

.panelskel__bar--chip { width: 80px; height: 24px; border-radius: 12px; }

.panelskel__bar--short { width: 55%; }

.panelskel__bar--block { height: 96px; margin-top: 8px; border-radius: 10px; }

.drawer__loading.panelskel, .sheet__loading.panelskel { padding: 6px 2px 0; }

/* A panel re-rendering after a save: a slim green line sweeps its top. */
.drawer--busy .drawer__panel::before, .sheet--busy .sheet__panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg, transparent, #3f9a6b, transparent); background-size: 50% 100%; background-repeat: no-repeat;
  animation: panel-busy 1s linear infinite;
}

.sidebar { view-transition-name: sidebar; }
@media (prefers-reduced-motion: reduce) {
  .panelskel__bar,
  .drawer--busy .drawer__panel::before,
  .sheet--busy .sheet__panel::before { animation: none; }
}

@keyframes panelskel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes panel-busy { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* The flyout's links and the user chip are links too: never underlined. */
.nav__flylink, .user { text-decoration: none; }

/* A number on a sidebar entry (ui-navtab Count): how many things wait there. */
.nav__count {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  background: var(--nav-accent); color: var(--inverse);
}
.app--navfold .nav__count { display: none; }

/* A panel action that is a link (open the full page) centres its icon like
   the buttons do, and is never underlined. */
a.detail__act {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; text-decoration: none;
}

/* ===== Buttons ===================================================================
   .btn and its variants, moved verbatim from intranet.css. --sm is the toolbar
   size; --primary the one action; --soft the neutral outlined button; --quiet a
   borderless one; --ghost is drawn for the dark sidebar and reads as --soft in
   the page, panels and dialogs; --danger is solid, --dangertext a red outline on
   hover; --icononly a square icon button; --block full width. */



/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn--sm { padding: 6px 10px; font-size: 13px; }

.btn--block { width: 100%; }

/* Primary buttons: a solid, higher-contrast green with white text so they stand
   out on the light canvas (the light --brand fill is reserved for chips/pills). */
.btn--primary { background: var(--action); color: var(--on-action); font-weight: 600; }

.btn--primary:hover { background: var(--action-hover); }

.btn--ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #e6efe9; }

.btn--ghost:hover { border-color: var(--nav-accent); color: var(--nav-accent); }

.btn--soft { background: var(--white); border-color: var(--line); color: var(--muted); }

.btn--soft:hover { border-color: var(--brand); color: var(--link); }

/* A form whose Save wakes up only once something changed (dirtyform.js). */
.btn:disabled, .btn:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; }

.btn--primary:disabled:hover { background: var(--action); }

.btn--danger { background: var(--danger); color: var(--on-action); border-color: var(--danger); }

.btn--danger:hover { filter: brightness(.94); }

/* A destructive action that should not shout: a soft button in danger ink. */
.btn--dangertext { color: var(--danger); }

.btn--dangertext:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

.btn--quiet { background: transparent; border-color: transparent; color: var(--muted); }

.btn--quiet:hover { color: var(--link); background: var(--brand-tint); }

/* .btn--ghost is drawn for the dark sidebar (pale text, translucent white
   border), so on a white card it all but vanished: "Back to to start",
   "Unfold all", "mark met" and "Hide done" were near-invisible, and so were
   Delete and Reject on the Sources & tools cards and drawer. Every light
   surface (the page, the drawer, the sheet, a pop-up) gets the light form. */
.main .btn--ghost, .drawer .btn--ghost, .sheet .btn--ghost, dialog .btn--ghost { color: var(--muted); border-color: var(--line); background: transparent; }

.main .btn--ghost:hover, .drawer .btn--ghost:hover, .sheet .btn--ghost:hover, dialog .btn--ghost:hover { color: var(--link); border-color: var(--brand); background: var(--brand-tint); }

.btn .ico { font-size: 1.05em; }


/* An icon-only button (Copy link on a project page): square, the icon centred;
   its aria-label carries the name. */
.btn--icononly { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding-left: 8px; padding-right: 8px; }

.btn { box-sizing: border-box; min-height: var(--ctl-h); padding-top: 0; padding-bottom: 0; font-size: var(--ctl-fs); line-height: 1.2; }

.btn--sm { min-height: var(--ctl-h-sm); font-size: var(--ctl-fs-sm); }

.btn .ico { flex: none; }

.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }

.btn { transition: background .15s, border-color .15s, color .15s, transform .08s ease; }
@media (prefers-reduced-motion: reduce) {

  .btn:active:not(:disabled) { transform: none; }
}



/* ===== Tables ====================================================================
   One data table (Intranet ADR 0169, shared by 0205): .table-wrap is the frame;
   .table (the Intranet also uses its older names .perm, .tasktable, .cleanup and
   .statstable) has an 11px uppercase header, 12x16 cells, a line between rows
   and a hover. td.num / th.num right-align figures, .wtable__run holds a row's
   actions, td.empty is the one empty row. A header made sortable by
   /ui/js/sorttable.js wraps its text in .sortbtn (or .colsort for a
   server-sorted link) and carries aria-sort. Moved verbatim from intranet.css. */

.colsort { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.colsort:hover { color: var(--link); }
.sortbtn { background: none; border: 0; padding: 4px 0; min-height: 24px; font: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.sortbtn:hover { color: var(--link); }
.sortbtn::after { content: "⇅"; font-size: 10px; opacity: .35; }
th[aria-sort="ascending"] .sortbtn::after { content: "↑"; opacity: 1; color: var(--link); }
th[aria-sort="descending"] .sortbtn::after { content: "↓"; opacity: 1; color: var(--link); }
.table-wrap {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: none; padding: 0; overflow-x: auto;
}
:is(.table, .perm, .tasktable, .cleanup, .statstable) { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) thead th {
  background: var(--table-head-bg); color: var(--table-head-fg);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  border-bottom: 1px solid var(--line); box-shadow: none;
}
:is(.table, .perm, .tasktable, .cleanup, .statstable) thead th { text-align: left; padding: 10px 16px; position: static; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) tbody tr { border-top: 0; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) tbody td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) tbody tr:first-child > td { border-top: 0; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) tbody tr:hover > td { background: var(--table-row-hover); }
:is(.table, .perm, .tasktable, .cleanup, .statstable) tbody tr:hover { background: transparent; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) :is(td, th).num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wtable__run { text-align: right; white-space: nowrap; }
.wtable__run > :is(form, a, button, details, span) { display: inline-flex; vertical-align: middle; margin: 0; }
.wtable__run > * + * { margin-left: 6px; }
:is(.table, .perm, .tasktable, .cleanup, .statstable) td.empty { padding: 32px 16px; text-align: center; color: var(--muted); font-weight: 400; }
.colsort { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; }
.colsort::after { content: "⇅"; font-size: 10px; opacity: .35; }
th[aria-sort="ascending"] .colsort::after { content: "↑"; opacity: 1; color: var(--link); }
.sortbtn::after, .colsort::after { content: "⇅"; content: "⇅" / ""; }
th[aria-sort="ascending"] .sortbtn::after, th[aria-sort="ascending"] .colsort::after { content: "↑"; content: "↑" / ""; }
th[aria-sort="descending"] .sortbtn::after { content: "↓"; content: "↓" / ""; }

/* ===== Modal and confirm dialog ==================================================
   A native <dialog class="modal"> with .modal__panel > .modal__head (.modal__title,
   .modal__x), .modal__body and .modal__foot; --wide and --side (a sheet from the
   right). Opened by data-modal-open="<id>" (/ui/js/modal.js). The ONE confirm
   dialog is ui-confirm (window.uiConfirm, /ui/js/ui-confirm.js). Moved verbatim
   from intranet.css (ADR 0206). */



/* ===========================================================================
   Modal dialogs — the consistent add/edit form pattern (see modal.js).
   =========================================================================== */
dialog.modal { padding: 0; border: none; background: transparent; margin: 0;
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; overflow: visible; color: var(--ink);
  opacity: 0; transition: opacity .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete; }

dialog.modal[open] { display: flex; align-items: center; justify-content: center; opacity: 1; }

dialog.modal::backdrop { background: var(--overlay, rgba(15,25,19,.5)); opacity: 0;
  transition: opacity .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete; }

dialog.modal[open]::backdrop { opacity: 1; }

.modal__panel { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28); width: min(540px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden; }

.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 22px; border-bottom: 1px solid var(--line); }

.modal__title { font-size: 16px; font-weight: 600; margin: 0; }

.modal__title-wrap { display: flex; align-items: center; gap: 9px; }

.modal__head-actions { display: flex; align-items: center; gap: 12px; }

.modal__x { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 8px; }

.modal__x:hover { background: var(--canvas); color: var(--ink); }

.modal__body { padding: 20px 22px; overflow: auto; }

.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--line); }

/* Wide centred variant, for a form that is a flow rather than a few fields —
   the project creation wizard (docs/adr/0033). */
.modal--wide .modal__panel { width: min(860px, 94vw); }

/* Right-anchored side-panel variant for longer forms. */
dialog.modal--side[open] { justify-content: flex-end; }

.modal--side .modal__panel { width: min(480px, 96vw); height: 100vh; max-height: 100vh; border-radius: 0; border-top: none; border-bottom: none; border-right: none;
  transform: translateX(100%); transition: transform .24s ease; }

dialog.modal--side[open] .modal__panel { transform: translateX(0); }

.modal__note { margin: 0 0 14px; font-size: 13px; color: var(--muted); }


/* The Intranet's ONE confirmation dialog (partials/ui_confirm.html). */
.uiconfirm__panel { width: min(540px, 94vw); }

.uiconfirm__msg { margin: 0; line-height: 1.55; }

/* The confirmation dialog's optional note (0165). */
.uiconfirm__input { margin: 12px 0 0; }

.uiconfirm__textarea { min-height: 72px; }
@media (prefers-reduced-motion: reduce) {
  .modal--side .modal__panel { transition: none !important; animation: none !important; }
}



/* ===== Form fields ===============================================================
   label.field (or div.field for a picker) > .field__label + the control:
   .field__input, .field__select or .field__textarea (--sm in toolbars, --auto to
   fit its content), .field__hint (--after under the control), .field__static (a
   read-only value), .field__row (a control and a button side by side); a
   checkbox is .field--check or .checkbox in a .checkrow. A select with 8+
   options becomes a typeahead (.ss, /ui/js/searchselect.js; data-no-search or
   data-native keep it native). Moved verbatim from intranet.css (ADR 0208). */



/* --- Forms ----------------------------------------------------------------- */
.field { display: block; margin-bottom: 14px; }

.field__label {
  display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 4px;
}

/* A field label may lead with an icon (cadence's ADR 0136 pattern). */
.field__label > .ico { width: 12px; height: 12px; margin-right: 5px; vertical-align: -0.15em; opacity: .85; }

.field__input, .field__select, .field__textarea {
  width: 100%; font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
}

.field__textarea { min-height: 120px; resize: vertical; }

/* A short textarea for a paragraph that sits INSIDE a dense form — the wizard's
   repeatable key-result rows, the project panel's fold row. The 120px default is
   a full-height field and dominates both. */
.field__textarea--sm { min-height: 56px; }

/* A one-line explanation UNDER a field's label (0057). Distinct from
   .field__label, which is the uppercase mono caption, and from a placeholder,
   which vanishes the moment anyone types. */
.field__hint { display: block; font-size: 12px; color: var(--muted); margin: -2px 0 5px; line-height: 1.4; }

.field__hint--after { margin: 6px 0 0; }

/* A field shown but not editable by this viewer — a policy's owner, scope and
   visibility for its owner seat (0130). Plain text in the input's box, so the
   form keeps its rhythm without offering a control that would do nothing. */
.field__static {
  display: block; font-size: 14px; padding: 8px 10px; color: var(--ink);
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* Two inputs that are one value — the two ends of the salary band. */
.field__row { display: flex; gap: 8px; align-items: center; }

.field__row .field__input { min-width: 0; }

.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--brand-soft);
}

.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }


.field--check { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 4px; }

.field--check .field__label { margin-bottom: 0; }

.field--check input { width: 16px; height: 16px; }


/* The .sproj* block that used to open this section went with the Strategy page's
   projects section (0050). .field__input--sm stays — ten other pages use it. */
.field__input--sm, .field__select--sm { padding: 5px 8px; font-size: 12.5px; }


/* Searchable-select (combobox) — native <select> hidden underneath; the input +
   popup mirror the Cmd+K / @mention dropdown styling for consistency. */
.ss { position: relative; }

.ss__native { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; }

.ss__input { width: 100%; padding-right: 30px; cursor: text; }

.ss__caret { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.ss__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }

.ss__clear:hover { background: var(--brand-tint); color: var(--brand-dark); }

.ss__pop { position: fixed; z-index: 1100; max-height: 260px; overflow-y: auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(18,22,42,.16); padding: 4px; }

.ss__group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px 4px; font-weight: 700; }

.ss__opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss__opt--active { background: var(--brand-tint); }

.ss__opt--current { font-weight: 600; color: var(--brand-dark); }

.ss__empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }

.field__input:not([type=file]), .field__select { box-sizing: border-box; height: var(--ctl-h); padding-top: 0; padding-bottom: 0; font-size: var(--ctl-fs); }

.field__input--sm:not([type=file]), .field__select--sm { height: var(--ctl-h-sm); font-size: var(--ctl-fs-sm); padding-left: 10px; padding-right: 10px; }

.field__select--auto, .field__input--auto { width: auto; }

/* A row of checkboxes under a field (a project's focus externals, 0200). */
.checkrow { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }

.checkrow .checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }