/* ============================================================
   WORKSPACE.CSS
   Phase 7A.

   The switcher is a header control, not a product surface. It states
   which workspace you are in and lets you change it, and does
   nothing else. No avatars, no colour-coded team badges, no card.

   Roles are written in words. A coloured pill that means "admin"
   has to be learned; the word does not.
   ============================================================ */

/* ---------- header switcher ---------- */

.ws-switcher { position: relative; display: inline-block; }
.ws-switcher[hidden] { display: none; }

.ws-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 11px; border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: var(--bg); cursor: pointer; text-align: left; max-width: 190px;
}
.ws-btn:hover { border-color: var(--ink-muted); }
.ws-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-btn-kicker {
  font: 600 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ws-btn-name {
  font: 600 12.5px/1.25 var(--sans); color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ws-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 258px; max-width: 320px;
  background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: 5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
  padding: 5px;
}
.ws-menu[hidden] { display: none; }
.ws-menu-head {
  font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); padding: 8px 9px 7px;
}

.ws-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  width: 100%; text-align: left; padding: 8px 9px;
  border: none; border-radius: 4px; background: none; cursor: pointer;
}
.ws-item:hover { background: var(--bg-raised); }
.ws-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The current workspace is marked by a rule, not a colour fill: it
   has to be legible to someone who cannot distinguish the accent. */
.ws-item.is-on { box-shadow: inset 2px 0 0 var(--accent); background: var(--bg-raised); }
.ws-item-name { font: 600 13px/1.3 var(--sans); color: var(--ink); }
.ws-item-meta { font: 400 11.5px/1.4 var(--sans); color: var(--ink-muted); }

.ws-menu-foot {
  border-top: 1px solid var(--hairline); margin-top: 4px; padding: 8px 9px 6px;
  font: 400 12px/1 var(--sans);
}
.ws-menu-foot a { color: var(--accent); }

/* ---------- workspaces page ---------- */

.ws-wrap { max-width: 780px; }

.ws-scope {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent);
  padding: 14px 16px; margin: 20px 0 26px;
  font: 400 13.5px/1.6 var(--sans); color: var(--ink-dim); max-width: 74ch;
}
.ws-scope strong { color: var(--ink); font-weight: 600; }

.ws-h {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 28px 0 8px;
}
.ws-sub {
  font: 400 13.5px/1.55 var(--sans); color: var(--ink-dim);
  margin: 0 0 14px; max-width: 70ch;
}
.ws-note {
  font: 400 12.5px/1.6 var(--sans); color: var(--ink-muted);
  margin: 12px 0 0; max-width: 72ch;
}
.ws-empty { font: 400 14px/1.6 var(--sans); color: var(--ink-dim); margin: 16px 0; }
.ws-empty a { color: var(--accent); }

.ws-list { display: flex; flex-direction: column; }
.ws-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.ws-row:last-child { border-bottom: none; }
.ws-row.is-current { box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px; }
.ws-row.is-archived .ws-row-name { color: var(--ink-muted); }
.ws-row-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1 1 240px; }
.ws-row-name { font: 600 14px/1.3 var(--sans); color: var(--ink); }
.ws-row-meta { font: 400 12px/1.45 var(--sans); color: var(--ink-muted); }
.ws-row-acts { display: flex; flex-wrap: wrap; gap: 6px; }

.ws-current-tag {
  font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding: 6px 2px;
}
.ws-mini {
  padding: 5px 10px; border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: var(--bg); color: var(--ink-dim);
  font: 500 12px/1 var(--sans); cursor: pointer;
}
.ws-mini:hover { color: var(--ink); border-color: var(--ink-muted); }
.ws-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ws-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.ws-label {
  flex: 1 1 100%; font: 600 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ws-input {
  flex: 1 1 260px; padding: 9px 11px;
  border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: var(--bg); color: var(--ink); font: 400 14px/1.3 var(--sans);
}
.ws-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-status { font: 400 12.5px/1.5 var(--sans); color: var(--ink-dim); flex: 1 1 100%; }

@media (max-width: 640px) {
  .ws-btn { max-width: 132px; }
  .ws-menu { right: auto; left: 0; min-width: 232px; }
  .ws-row-acts { width: 100%; }
}

/* ---------- members page (7B) ---------- */

/* A native select. The role list is four items that never changes,
   and a custom dropdown would cost keyboard support to gain nothing. */
.wm-role {
  padding: 6px 9px; border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: var(--bg); color: var(--ink); font: 500 12.5px/1.2 var(--sans);
}
.wm-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Roles explained in sentences beside the control that sets them. */
.wm-roles {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px; margin: 18px 0 0; max-width: 68ch;
}
.wm-roles dt { font: 600 12.5px/1.5 var(--sans); color: var(--ink); }
.wm-roles dd { margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--ink-muted); }

.wm-audit {
  width: 100%; border-collapse: collapse;
  font: 400 12.5px/1.5 var(--sans); color: var(--ink-dim);
}
.wm-audit th {
  text-align: left; font: 600 9.5px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline-strong); padding: 0 10px 7px 0;
}
.wm-audit td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); }
.wm-audit td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  .wm-roles { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .wm-roles dd { margin-bottom: 8px; }
}

/* ---------- shared raise (7C) ---------- */

/* The most important element in the phase: it answers "who can see
   this" without the founder having to go and look. Bordered, never
   tinted, because a shared raise is a normal state and not a warning. */
.wr-scope {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent);
  padding: 11px 14px; margin: 0 0 16px;
  font: 400 13px/1.6 var(--sans); color: var(--ink-dim); max-width: 78ch;
}
.wr-scope strong { color: var(--ink); font-weight: 600; }
/* Personal gets a quiet rule rather than the accent: it is the
   default state and does not need announcing. */
.wr-scope.is-personal { border-left-color: var(--ink-muted); }

.wr-assignee {
  padding: 4px 8px; border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: var(--bg); color: var(--ink); font: 500 12px/1.2 var(--sans);
}
.wr-assignee:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wr-vis {
  display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0;
  font: 400 12.5px/1.5 var(--sans); color: var(--ink-dim); cursor: pointer;
}
.wr-vis input { margin-top: 2px; accent-color: var(--accent); }
.wr-vis input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Written out on every note. The one risk this phase introduces is a
   founder mistaking a shared note for a private one. */
.wr-note-vis {
  font: 600 9.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
.wr-note-vis.is-private { color: var(--ink-muted); }

/* ---------- shared discovery (7D) ---------- */

/* Every saved object says whose it is, right where it is listed. The
   failure this phase risks is editing something you think is yours
   and changing it for four other people. */
.wd-scope {
  font: 600 9.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
.wd-scope.is-personal { color: var(--ink-muted); }

.wd-sub {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 12.5px/1.4 var(--sans); color: var(--ink-dim); cursor: pointer;
}
.wd-sub input { accent-color: var(--accent); }
.wd-sub input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wd-note { font: 400 12px/1.5 var(--sans); color: var(--ink-muted); }