/* ============================================================================
   Skha Workspace — Components
   Shared vocabulary. Every screen draws from this file only, so the six
   views read as one product.
   ========================================================================== */

/* Icon slots. Screen markup writes <span data-icon="name"></span> and app.js
   swaps in the SVG, so the slot must size and align like the icon itself. */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* A default size, so an icon slot with no size rule of its own still renders
   instead of collapsing to 0x0. Every rule below is more specific or later
   in the cascade, so it overrides this freely. */
[data-icon] > svg { display: block; width: 13px; height: 13px; }

/* ----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); color: var(--text-primary); }
.btn:active { background: var(--bg-sunken); }

/* Primary: the darkest logo blue. Deliberately not bright — an approval
   action in a consulting workflow should read as considered, not urgent. */
.btn--primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.btn--primary:hover { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); color: #fff; }
.btn--primary:active { background: #12457c; }

.btn--quiet { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn--quiet:hover { background: var(--bg-sunken); border-color: transparent; color: var(--text-primary); }

.btn--sm { height: 25px; padding: 0 10px; font-size: var(--fs-micro); border-radius: var(--radius-sm); }
.btn--sm svg { width: 12px; height: 12px; }

.btn--lg { height: 36px; padding: 0 18px; font-size: var(--fs-body); }

.btn--danger { color: var(--status-danger); }
.btn--danger:hover { background: var(--status-danger-bg); border-color: #e8c2c6; color: var(--status-danger); }
.btn--accept { color: var(--status-success); }
.btn--accept:hover { background: var(--status-success-bg); border-color: #bcdfcd; color: var(--status-success); }

.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

.btngroup { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ----------------------------------------------------------------------------
   Status badges — colour is never the only signal. Each carries a glyph
   and a written label so status survives greyscale printing and screenshots.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
  border: 1px solid transparent;
}
.badge svg { width: 10px; height: 10px; flex: none; }
.badge__glyph { font-size: 9px; line-height: 1; }

.badge--approved { background: var(--status-success-bg); color: var(--status-success); border-color: #cfe6da; }
.badge--review   { background: var(--status-warning-bg); color: var(--status-warning); border-color: #ecd9b3; }
.badge--draft    { background: var(--status-neutral-bg); color: var(--status-neutral); border-color: #e0e0dc; }
.badge--decision { background: var(--status-danger-bg);  color: var(--status-danger);  border-color: #ebc9cd; }
.badge--info     { background: var(--status-info-bg);    color: var(--status-info);    border-color: #ccdff2; }
.badge--none     { background: transparent; color: var(--text-faint); border-color: var(--border-default); }

.badge--lg { height: 24px; padding: 0 10px; font-size: var(--fs-label); }

/* ----------------------------------------------------------------------------
   Avatars
   -------------------------------------------------------------------------- */

.avatar {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
  user-select: none;
}
.avatar--sm { width: 21px; height: 21px; font-size: 9px; }
.avatar--lg { width: 32px; height: 32px; font-size: 12px; }
.avatar--brand { background: var(--brand-primary-soft); color: var(--brand-primary); }

.avatarstack { display: flex; align-items: center; }
/* Overlap is kept below the initials' side-bearing so the second letter of
   each pair is never covered by the next avatar's ring. */
.avatarstack .avatar { margin-left: -3px; border: 2px solid var(--bg-surface); }
.avatarstack .avatar:first-child { margin-left: 0; }
.avatarstack__more {
  margin-left: -3px;
  border: 2px solid var(--bg-surface);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 9.5px;
}

/* ----------------------------------------------------------------------------
   Cards & panels
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  letter-spacing: 0;
}
.card__meta { font-size: var(--fs-label); color: var(--text-muted); }
.card__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.card__body { padding: var(--sp-5); min-height: 0; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: 11px var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  flex: none;
  font-size: var(--fs-label);
  color: var(--text-muted);
}

.sectionlabel {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
   AI cue — the single, consistent treatment for machine-produced content.
   A four-point star, a quiet label, never a persona and never a chat bubble.
   -------------------------------------------------------------------------- */

.aicue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-accent);
  white-space: nowrap;
}
.aicue svg { width: 11px; height: 11px; flex: none; }
.aicue--muted { color: var(--text-muted); }
.aicue--muted svg { color: var(--brand-accent); }

/* A surface holding a machine suggestion: hairline left marker, tinted
   ground. Reads as an annotation on the work, not a separate assistant. */
.aipanel {
  background: linear-gradient(90deg, #f4f8fc 0%, var(--bg-subtle) 100%);
  border: 1px solid #dfe9f3;
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}
.aipanel__body { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.5; }
.aipanel__actions { display: flex; gap: var(--sp-2); margin-top: 9px; }

/* ----------------------------------------------------------------------------
   Data table
   -------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: separate; border-spacing: 0; }

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-subtle);
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 9px var(--sp-4);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.table tbody td {
  padding: 11px var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  vertical-align: top;
  line-height: 1.45;
}
.table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--bg-subtle); }
.table tbody tr.is-selected { background: var(--brand-primary-soft); }
.table tbody tr.is-selected td { border-bottom-color: #d7e4f2; }
.table tbody tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--brand-primary); }

.table .num {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  font-size: var(--fs-label);
  font-weight: 600;
  width: 34px;
}
.table .cell-title { color: var(--text-primary); font-weight: 600; }

/* Density toggle */
.table--compact tbody td { padding: 7px var(--sp-4); }
.table--compact tbody td .cell-msg { -webkit-line-clamp: 1; }

.cell-msg {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Tabs & segmented controls
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  padding: 0 var(--sp-5);
}
.tab {
  padding: 9px 0 8px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  padding: 3px 10px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented button:hover { color: var(--text-primary); }
.segmented button.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-subtle);
}

/* Filter chips */
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.chip__n { font-variant-numeric: tabular-nums; opacity: 0.72; font-weight: 700; }

/* ----------------------------------------------------------------------------
   Search field
   -------------------------------------------------------------------------- */

.searchfield {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0 var(--sp-3) 0 var(--sp-5);
  height: 48px;
  box-shadow: var(--shadow-subtle);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.searchfield:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(54, 143, 206, 0.13);
}
.searchfield > svg,
.searchfield > [data-icon] svg { width: 17px; height: 17px; color: var(--text-faint); flex: none; }
.searchfield > [data-icon] { display: inline-flex; flex: none; color: var(--text-faint); }
.searchfield input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 14.5px;
  color: var(--text-primary);
}
.searchfield input::placeholder { color: var(--text-faint); }

.scopebar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.scopetoggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
}
.scopetoggle.is-on { background: var(--brand-primary-soft); border-color: #ccdff2; color: var(--brand-primary); }
.scopetoggle__check { width: 11px; height: 11px; display: grid; place-items: center; }
.scopetoggle__check svg { width: 11px; height: 11px; }

/* ----------------------------------------------------------------------------
   Citations
   -------------------------------------------------------------------------- */

.cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
  transition: all var(--dur-fast) var(--ease);
  cursor: pointer;
}
.cite:hover, .cite.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.citegroup { display: inline-flex; gap: 3px; }

/* ----------------------------------------------------------------------------
   Source list rows
   -------------------------------------------------------------------------- */

.sourcerow {
  display: flex;
  gap: 10px;
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.sourcerow:hover { background: var(--bg-subtle); }
.sourcerow.is-active { background: var(--brand-primary-soft); box-shadow: inset 2px 0 0 var(--brand-primary); }
.sourcerow__n {
  flex: none;
  width: 19px; height: 17px;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  font-size: 10.5px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.sourcerow.is-active .sourcerow__n { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.sourcerow__name { display: block; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.sourcerow__meta { display: block; font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }

/* A scroll region that is cut mid-line looks like a bug in a screenshot;
   this fades the last few pixels so it reads as continuation. */
.scroll-fade { position: relative; }
.scroll-fade::after {
  content: "";
  position: absolute;
  left: 1px; right: 9px; bottom: 0;
  height: 22px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-surface) 92%);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Drawer
   -------------------------------------------------------------------------- */

.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  flex: none;
}
.drawer__title { font-family: var(--font-display); font-size: var(--fs-h3); }
.drawer__sub { font-size: var(--fs-label); color: var(--text-muted); margin-top: 2px; }
.drawer__close { margin-left: auto; }
.drawer__body { flex: 1 1 auto; min-height: 0; padding: var(--sp-5); }
.drawer__foot {
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-default);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
  z-index: 50;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* ----------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 24, 40, 0.34);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.modal-layer.is-open { opacity: 1; pointer-events: auto; }

.modal {
  width: 460px;
  max-width: 92vw;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  transform: translateY(6px);
  transition: transform var(--dur-slow) var(--ease);
}
.modal-layer.is-open .modal { transform: translateY(0); }
.modal--wide { width: 660px; }

.modal__head { padding: var(--sp-5) var(--sp-6) var(--sp-3); }
.modal__title { font-family: var(--font-display); font-size: var(--fs-h1); }
.modal__body { padding: 0 var(--sp-6) var(--sp-5); font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.6; }
.modal__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}
.modal__foot .spacer { margin-left: auto; }

/* ----------------------------------------------------------------------------
   Definition rows, key/value blocks
   -------------------------------------------------------------------------- */

.kv { display: grid; gap: 3px; }
.kv + .kv { margin-top: var(--sp-4); }
.kv__k {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.kv__v { font-size: var(--fs-body-sm); color: var(--text-primary); line-height: 1.5; }
.kv__v--muted { color: var(--text-secondary); }

.metarow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.metaitem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-label);
  color: var(--text-muted);
  white-space: nowrap;
}
.metaitem svg { width: 12px; height: 12px; opacity: 0.75; }
.metadot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex: none; }

/* ----------------------------------------------------------------------------
   Bullet list with markers
   -------------------------------------------------------------------------- */

.bullets { display: grid; gap: 5px; }
.bullets li {
  position: relative;
  padding-left: 13px;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 1px;
  background: var(--border-strong);
}

/* ----------------------------------------------------------------------------
   Tracked edit — the visual grammar for a proposed change
   -------------------------------------------------------------------------- */

.del {
  background: #fbeced;
  color: #8e2f3a;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  padding: 0 2px;
  border-radius: var(--radius-xs);
}
.ins {
  background: #e4f2ea;
  color: #1a6b47;
  padding: 0 2px;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 -1px 0 #a9d6bf;
}

/* ----------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.progress {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  overflow: hidden;
  display: flex;
}
.progress__seg { height: 100%; }
.progress__seg--done { background: var(--brand-primary); }
.progress__seg--review { background: var(--skha-blue-light); }
.progress__seg--approved { background: var(--status-success); }

.legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.legenditem { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--text-muted); }
.legenditem__sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ----------------------------------------------------------------------------
   Slide wireframe thumbnails — abstract, fictional consulting layouts
   -------------------------------------------------------------------------- */

.wire {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wire:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-subtle); }
.wire svg { display: block; width: 100%; height: auto; }
.wire__cap {
  padding: 6px 9px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.3;
}

/* ----------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.u-center { display: flex; align-items: center; }
.u-gap-1 { gap: var(--sp-1); } .u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); } .u-gap-4 { gap: var(--sp-4); }
.u-mt-1 { margin-top: var(--sp-1); } .u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); } .u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); } .u-mt-6 { margin-top: var(--sp-6); }
.u-muted { color: var(--text-muted); }
.u-secondary { color: var(--text-secondary); }
.u-small { font-size: var(--fs-label); }
.u-micro { font-size: var(--fs-micro); }
.u-nowrap { white-space: nowrap; }
.u-grow { flex: 1 1 auto; min-width: 0; min-height: 0; }
.u-auto { margin-left: auto; }
.u-display { font-family: var(--font-display); }
.u-num { font-variant-numeric: tabular-nums; }
.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}