/* Copley workflows (v3) - design tokens, element defaults and the shared components the
   shell owns: buttons, inputs, chips, squares and counters, disclosure blocks, empty
   states, tooltip, popover, bottom sheet, inline confirm, toast and the "Who are you?"
   picker. Layout lives in css/layout.css. Other stylesheets use these tokens. */

:root {
  --cw-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cw-fs: 13px;          /* sidebar and controls */
  --cw-fs-page: 15px;     /* the middle page */
  --cw-fs-sm: 12px;
  --cw-lh: 1.4;

  --cw-bg: #f3f4f6;
  --cw-surface: #ffffff;
  --cw-surface-2: #f8f9fa;
  --cw-border: #d4d8de;
  --cw-border-strong: #9aa3ad;
  --cw-text: #1b1f24;
  --cw-muted: #5b6570;
  --cw-accent: #1d4ed8;
  --cw-accent-weak: #e8eefc;
  --cw-ok: #2e7d32;
  --cw-warn: #b26a00;
  --cw-danger: #c62828;
  --cw-purple: #5e35b1;
  --cw-q: #fff2b3;        /* open question */
  --cw-a: #dbeafe;        /* changed by Claude */
  --cw-p: #dcfce7;        /* suggestion */
  --cw-c: #fde2e2;        /* never skip */

  --cw-pad: 4px;
  --cw-pad-2: 6px;
  --cw-pad-3: 8px;
  --cw-radius: 0;
  --cw-tap: 40px;

  /* Note kinds */
  --cw-k-change: #ef6c00;
  --cw-k-add: #6a1b9a;
  --cw-k-remove: #c62828;
  --cw-k-answer: #f9a825;
  --cw-k-approve: #2e7d32;
  --cw-k-comment: #1976d2;

  /* Shared extras */
  --cw-ctl-h: 26px;                 /* button / input height */
  --cw-ctl-h-sm: 22px;
  --cw-hover: #eef1f5;              /* light fill under the pointer */
  --cw-hl: var(--cw-accent-weak);   /* selected fill */
  --cw-hl-line: var(--cw-accent);   /* selected outline */
  --cw-hover-line: #93a9e8;         /* hovered outline (lighter than selected) */
  --cw-dark: #1b1f24;               /* tooltip and toast */
  --cw-shadow-pop: 0 6px 24px rgba(16, 24, 40, 0.18), 0 1px 3px rgba(16, 24, 40, 0.12);

  /* Layout (js/core.js sets the two widths from the saved layout) */
  --cw-side-w: 280px;
  --cw-diag-w: 42%;
  --cw-rail-w: 36px;
  --cw-bottom-h: 52px;
}

/* Touch screens: bigger controls. */
@media (pointer: coarse) {
  :root { --cw-ctl-h: 36px; --cw-ctl-h-sm: 30px; }
}

/* Phones and tablets (body.cw-mobile below 1024px): larger text and tap targets. */
body.cw-mobile {
  --cw-fs: 15px;
  --cw-fs-page: 16px;
  --cw-fs-sm: 13px;
  --cw-ctl-h: var(--cw-tap);
  --cw-ctl-h-sm: 32px;
}

/* ---------- Element defaults ---------- */

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: var(--cw-font);
  font-size: var(--cw-fs);
  line-height: var(--cw-lh);
  color: var(--cw-text);
  background: var(--cw-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled,
[aria-disabled="true"] { cursor: default; }

/* Phones: 16px text in fields stops iOS from zooming the page on focus. */
body.cw-mobile input,
body.cw-mobile select,
body.cw-mobile textarea { font-size: max(16px, 1em); }

a { color: var(--cw-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

p { margin: 0 0 var(--cw-pad-3); }

img, svg, video { max-width: 100%; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: 1px;
}

::selection { background: #c7d6fb; }

* { scrollbar-width: thin; scrollbar-color: #c3c8cf transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c3c8cf; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

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

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

.cw-muted { color: var(--cw-muted); }
.cw-small { font-size: var(--cw-fs-sm); }
.cw-strong { font-weight: 600; }
.cw-ellipsis {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cw-row { display: flex; align-items: center; gap: var(--cw-pad); min-width: 0; }
.cw-stack { display: flex; flex-direction: column; gap: var(--cw-pad); min-width: 0; }
.cw-grow { flex: 1 1 auto; min-width: 0; }
.cw-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cw-only-mobile { display: none; }
body.cw-mobile .cw-only-mobile { display: revert; }
body.cw-mobile .cw-only-desktop { display: none; }

/* Skip link: appears when reached with the keyboard. */
.cw-skip {
  position: fixed;
  left: 8px;
  top: -40px;
  z-index: 1200;
  padding: 4px 8px;
  background: var(--cw-surface);
  border: 1px solid var(--cw-accent);
  color: var(--cw-accent);
  font-size: var(--cw-fs);
}
.cw-skip:focus { top: 8px; }

/* Phones: pressing and holding (to leave a note) should not select text or open the phone menu. */
body.cw-mobile .cw-longpress {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.cw-mobile .cw-longpress input,
body.cw-mobile .cw-longpress textarea,
body.cw-mobile .cw-longpress [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

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

.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cw-pad);
  min-height: var(--cw-ctl-h);
  padding: 0 var(--cw-pad-3);
  border: 1px solid var(--cw-border);
  background: var(--cw-surface);
  color: var(--cw-text);
  font-size: var(--cw-fs);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
.cw-btn:hover { background: var(--cw-hover); border-color: var(--cw-border-strong); text-decoration: none; }
.cw-btn:active { background: #e3e7ec; }
.cw-btn:disabled,
.cw-btn[aria-disabled="true"] { color: var(--cw-muted); background: var(--cw-surface-2); border-color: var(--cw-border); opacity: 0.7; }
.cw-btn[aria-pressed="true"] { background: var(--cw-accent-weak); border-color: var(--cw-accent); color: var(--cw-accent); }

.cw-btn--primary { background: var(--cw-accent); border-color: var(--cw-accent); color: #fff; }
.cw-btn--primary:hover { background: #1a43bd; border-color: #1a43bd; }
.cw-btn--primary:active { background: #163a9f; }

.cw-btn--danger { color: var(--cw-danger); border-color: #e6a3a3; }
.cw-btn--danger:hover { background: var(--cw-c); border-color: var(--cw-danger); }

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

.cw-btn--sm { min-height: var(--cw-ctl-h-sm); padding: 0 var(--cw-pad-2); font-size: var(--cw-fs-sm); }
.cw-btn--icon { width: var(--cw-ctl-h); padding: 0; }
.cw-btn--sm.cw-btn--icon { width: var(--cw-ctl-h-sm); }
.cw-btn--block { display: flex; width: 100%; justify-content: flex-start; }

/* A button that reads as a link. */
.cw-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-accent);
  font-size: inherit;
  text-align: left;
  text-decoration: none;
}
.cw-link:hover { text-decoration: underline; }

/* "+ Add a note": always there, quiet until wanted. */
.cw-add {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-pad);
  min-height: var(--cw-ctl-h-sm);
  padding: 0 var(--cw-pad-2);
  border: 1px dashed var(--cw-border-strong);
  background: transparent;
  color: var(--cw-accent);
  font-size: var(--cw-fs-sm);
}
.cw-add:hover { background: var(--cw-accent-weak); border-style: solid; border-color: var(--cw-accent); }

/* ---------- Fields ---------- */

.cw-input,
.cw-select,
.cw-textarea {
  display: block;
  width: 100%;
  min-height: var(--cw-ctl-h);
  padding: 2px var(--cw-pad-2);
  border: 1px solid var(--cw-border-strong);
  background: var(--cw-surface);
  color: var(--cw-text);
  font-size: var(--cw-fs);
  line-height: 1.35;
}
.cw-textarea { min-height: 64px; padding: var(--cw-pad) var(--cw-pad-2); resize: vertical; }
.cw-input:focus,
.cw-select:focus,
.cw-textarea:focus { border-color: var(--cw-accent); outline: 1px solid var(--cw-accent); outline-offset: 0; }
.cw-input::placeholder,
.cw-textarea::placeholder { color: #8a939d; }

.cw-field { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--cw-pad-3); }
.cw-label { font-size: var(--cw-fs-sm); color: var(--cw-muted); }
.cw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cw-pad); margin-top: var(--cw-pad-3); }

/* ---------- Chips ---------- */

.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-pad);
  max-width: 100%;
  min-height: 20px;
  padding: 0 var(--cw-pad-2);
  border: 1px solid var(--cw-border);
  background: var(--cw-surface-2);
  color: var(--cw-text);
  font-size: var(--cw-fs-sm);
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
button.cw-chip:hover { border-color: var(--cw-border-strong); background: var(--cw-hover); }
.cw-chip--accent { background: var(--cw-accent-weak); border-color: #b9cbf6; color: var(--cw-accent); }
.cw-chip--ok { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.cw-chip--warn { background: #fff4e0; border-color: #f0c27a; color: #7a4a00; }
.cw-chip--danger { background: var(--cw-c); border-color: #f1a5a5; color: #8e1c1c; }
.cw-chip--q { background: var(--cw-q); border-color: #e6cf5c; color: #5c4700; }
.cw-chip--muted { background: transparent; color: var(--cw-muted); }

/* ---------- Squares and counters ---------- */

/* Relation marker: solid = you're in charge, outlined = you take part, .cw-sq--empty keeps the slot. */
.cw-sq {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid transparent;
  vertical-align: middle;
}
.cw-sq--owner { background: var(--cw-accent); border-color: var(--cw-accent); }
.cw-sq--involved { background: transparent; border-color: var(--cw-accent); }
.cw-sq--empty { visibility: hidden; }

/* Small square with a number: open questions (yellow), notes (grey), changes (blue),
   suggestions (green), never skip (red). */
.cw-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 1px solid var(--cw-border-strong);
  background: #eceff2;
  color: #39424c;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.cw-count--q { background: var(--cw-q); border-color: #d9b800; color: #5c4700; }
.cw-count--note { background: #eceff2; border-color: #b7bec6; color: #39424c; }
.cw-count--change { background: var(--cw-a); border-color: #8fb0f2; color: #1e3a8a; }
.cw-count--suggest { background: var(--cw-p); border-color: #86d19b; color: #14532d; }
.cw-count--never { background: var(--cw-c); border-color: #ee9a9a; color: #7f1d1d; }

/* ---------- Collapsed-but-present blocks ("History (12)") ---------- */

.cw-disclosure { margin: var(--cw-pad-3) 0; }
.cw-disclosure-btn {
  display: flex;
  align-items: center;
  gap: var(--cw-pad-2);
  width: 100%;
  min-height: var(--cw-ctl-h);
  padding: 0 var(--cw-pad);
  border: 0;
  border-top: 1px solid var(--cw-border);
  background: transparent;
  color: var(--cw-text);
  font-size: var(--cw-fs);
  font-weight: 600;
  text-align: left;
}
.cw-disclosure-btn:hover { background: var(--cw-hover); }
.cw-disclosure-caret {
  flex: none;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 0.12s ease;
}
.cw-disclosure-btn[aria-expanded="true"] .cw-disclosure-caret { transform: rotate(90deg); }
.cw-disclosure-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cw-disclosure-count { color: var(--cw-muted); font-weight: 400; }
.cw-disclosure-body { padding: var(--cw-pad) 0 0 calc(var(--cw-pad) + 11px); }

/* ---------- Plain empty / status messages ---------- */

.cw-empty {
  padding: var(--cw-pad-3) 0;
  color: var(--cw-text);
  font-size: var(--cw-fs);
}
#middle .cw-empty { padding: 24px 0; font-size: var(--cw-fs-page); }
.cw-empty-title { font-weight: 600; }
.cw-empty-text { margin-top: 2px; color: var(--cw-muted); }
.cw-empty-actions { display: flex; flex-wrap: wrap; gap: var(--cw-pad); margin-top: var(--cw-pad-3); }

/* ---------- Relative time ---------- */

.cw-time { color: var(--cw-muted); white-space: nowrap; font-size: var(--cw-fs-sm); }

/* ---------- Tooltip ([data-tip], js/core.js) ---------- */

.cw-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1100;
  max-width: min(300px, calc(100vw - 12px));
  padding: 4px 7px;
  background: var(--cw-dark);
  color: #fff;
  font-size: var(--cw-fs-sm);
  line-height: 1.35;
  white-space: pre-line;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.25);
}

/* ---------- Popover ---------- */

#popover-root { position: relative; z-index: 1000; }

.cw-popover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  min-width: 180px;
  max-width: min(380px, calc(100vw - 16px));
  overflow: auto;
  padding: var(--cw-pad-3);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border-strong);
  box-shadow: var(--cw-shadow-pop);
  font-size: var(--cw-fs);
  animation: cw-pop-in 0.1s ease-out;
}
.cw-popover:focus { outline: none; }
.cw-popover-title { margin: 0 0 var(--cw-pad-2); font-weight: 600; }

@keyframes cw-pop-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Bottom sheet (phones) ---------- */

#sheet-root { position: relative; z-index: 950; }

.cw-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(17, 24, 39, 0.32);
  animation: cw-fade-in 0.12s ease-out;
}
.cw-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 951;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;
  margin: 0 auto;
  max-width: 640px;
  background: var(--cw-surface);
  border-top: 1px solid var(--cw-border-strong);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.18);
  animation: cw-sheet-in 0.16s ease-out;
}
.cw-sheet:focus { outline: none; }
.cw-sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cw-pad-2);
  min-height: 44px;
  padding: 10px var(--cw-pad-3) var(--cw-pad) 12px;
  border-bottom: 1px solid var(--cw-border);
}
.cw-sheet-grab {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  background: #c3c8cf;
}
.cw-sheet-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cw-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--cw-pad-3) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

@keyframes cw-sheet-in {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}
@keyframes cw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Inline confirm ("Remove this? Yes No") ---------- */

.cw-confirm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cw-pad);
  padding: 2px var(--cw-pad);
  border: 1px solid #f1a5a5;
  background: #fff5f5;
  font-size: var(--cw-fs-sm);
  vertical-align: middle;
}
.cw-confirm-text { font-weight: 600; color: #7f1d1d; }

/* ---------- Toast ---------- */

/* At the top centre: never over the open step's buttons or the Mark up toolbar at the bottom. */
.cw-toast {
  position: fixed;
  left: 50%;
  top: 10px;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: var(--cw-pad-3);
  max-width: calc(100vw - 24px);
  padding: 7px 12px;
  background: var(--cw-dark);
  color: #fff;
  font-size: var(--cw-fs);
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.3);
  transform: translate(-50%, -8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.cw-toast.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cw-toast-action {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font-size: var(--cw-fs-sm);
  pointer-events: auto;
}
.cw-toast-action:hover { background: rgba(255, 255, 255, 0.12); }
body.cw-mobile .cw-toast { top: calc(8px + env(safe-area-inset-top, 0px)); }

/* ---------- "Who are you?" (CW.app.askWho) ---------- */

.cw-who-pop { width: 320px; }
.cw-who-hint { margin: 0 0 var(--cw-pad-2); color: var(--cw-muted); font-size: var(--cw-fs-sm); }
.cw-who-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cw-pad);
}
.cw-who-name,
.cw-who-other { width: 100%; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; }
.cw-who-other { grid-column: 1 / -1; color: var(--cw-accent); }
.cw-who-form { display: flex; gap: var(--cw-pad); margin-top: var(--cw-pad-2); }
.cw-who-form .cw-input { flex: 1 1 auto; min-width: 0; }
.cw-who-clear { display: block; margin-top: var(--cw-pad-3); font-size: var(--cw-fs-sm); }
.cw-who-qs { display: block; margin-top: var(--cw-pad-3); font-weight: 600; }
body.cw-mobile .cw-who-qs,
body.cw-mobile .cw-who-clear { min-height: 36px; }

/* ---------- No JavaScript ---------- */

.cw-noscript {
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 24px;
  background: var(--cw-surface);
  font-size: 16px;
}