/* =====================================================================
   TALES Client Portal — styles
   Standalone, brand-matched to Layer Logic Studio (Fraunces + Inter,
   indigo / paper). Light is the default; dark is a toggle, mirroring
   the main site's dual-theme identity.
   ===================================================================== */

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --wrap: 920px;
  --ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light (default) */
:root,
[data-theme="light"] {
  --bg: #f4f1ea;
  --surface: #fbf8f1;
  --surface-2: #ffffff;
  --border: #d9d3c3;
  --border-strong: #c9c2b0;
  --text: #1a1c22;
  --muted: #5e6068;
  --faint: #9b9c9f;
  --primary: #1f3a8a;
  --primary-hover: #16306f;
  --accent: #b35e1a;
  --shadow: 0 18px 40px rgba(26, 28, 34, 0.1);
  --shadow-sm: 0 2px 8px rgba(26, 28, 34, 0.06);
}

/* Dark (toggle) */
[data-theme="dark"] {
  --bg: #14161b;
  --surface: #191c22;
  --surface-2: #1f232a;
  --border: #2a2e36;
  --border-strong: #353a44;
  --text: #e7e5df;
  --muted: #9a9c9f;
  --faint: #5e6168;
  --primary: #8aa3e5;
  --primary-hover: #a5b8ee;
  --accent: #e29457;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}
html {
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--primary);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* ---------- Header ---------- */
.hdr {
  border-bottom: 1px solid var(--border);
  background: var(--bg); /* example copy: no backdrop blur (blank-paint bug when framed in Chrome) */
  position: sticky;
  top: 0;
  z-index: 10;
}
.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.brand__mark {
  height: 34px;
  width: auto;
  display: block;
}
.brand__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-left: 0.7rem;
  border-left: 1px solid var(--border-strong);
}
.hdr__right {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}
.lock svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}
.signout {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid transparent;
  text-decoration: none;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.signout svg {
  width: 18px;
  height: 18px;
}
.signout:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.8rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.hero__welcome {
  color: var(--muted);
  font-size: 1.075rem;
  max-width: 60ch;
  margin: 0;
}

/* ---------- Live preview card ---------- */
.preview[hidden] {
  display: none;
}
.preview {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.preview__card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.preview__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.preview__icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--primary) 18%, transparent);
  color: var(--primary);
}
.preview__icon svg {
  width: 24px;
  height: 24px;
}
.preview__body {
  flex: 1;
}
.preview__body h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}
.preview__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.preview__arrow {
  flex: none;
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Deliverables ---------- */
.sec-head {
  margin-bottom: 1.4rem;
}
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0 0 0.3rem;
}
.sec-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.file {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.file:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.file__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.file__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color: var(--primary);
}
.file__icon svg {
  width: 20px;
  height: 20px;
}
.file__meta {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.file__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
}
.file__desc {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1;
}
.file__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
}
.file__action svg {
  width: 15px;
  height: 15px;
}
.empty {
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
}
.empty[hidden] {
  display: none;
}

/* ---------- Footer ---------- */
.ftr {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--border);
}
.ftr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.ftr__row p {
  margin: 0;
}

/* ---------- Project checklist ---------- */
.checklist[hidden] {
  display: none;
}
.checklist {
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}
.ck {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
/* "Waiting on you" — the strip above the checklist. Warm, not a red alert:
   it should read as a shared status line, not a debt notice. */
.waiting[hidden] {
  display: none;
}
.waiting {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.wait {
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
  box-shadow: var(--shadow-sm);
}
.wait__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
}
.wait__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
  max-width: 62ch;
}
.wait__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
.wait__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--accent);
}
.wait__stat span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ck__status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.ck__bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 14%, var(--border));
  overflow: hidden;
}
.ck__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ck__summary {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.ck__summary strong {
  color: var(--text);
  font-weight: 600;
}
.ck__sep {
  color: var(--faint);
  margin-inline: 0.2rem;
}
.ck__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.ck__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid var(--border);
}
.ck__item:first-child {
  border-top: 0;
}
.ck__mark {
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  color: transparent;
}
.ck__mark svg {
  width: 14px;
  height: 14px;
}
.ck__item.is-done .ck__mark {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ck__item.is-doing .ck__mark {
  border-color: var(--accent);
  color: var(--accent);
}
.ck__item.is-doing .ck__mark svg {
  animation: ck-pulse 1.8s ease-in-out infinite;
}
@keyframes ck-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .ck__item.is-doing .ck__mark svg { animation: none; }
}
.ck__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.ck__label {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
}
.ck__item.is-done .ck__label {
  color: var(--muted);
  font-weight: 500;
}
.ck__note {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.ck__owner {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
  margin-top: 0.15rem;
}
/* Interactive (client-owned) items: the whole row is the checkbox */
.ck__toggle {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.9rem;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.ck__item.is-interactive {
  grid-template-columns: 1fr auto;
  transition: background var(--ease);
}
.ck__item.is-interactive:hover {
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}
.ck__item.is-interactive .ck__mark {
  border-radius: 6px;
}
.ck__item.is-interactive.is-todo:hover .ck__mark {
  border-color: var(--primary);
  color: color-mix(in oklab, var(--primary) 45%, transparent);
}
.ck__toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
.ck__toggle.is-error .ck__mark {
  border-color: #c0392b;
  animation: ck-shake 300ms ease;
}
@keyframes ck-shake {
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.ck__stamp {
  font-size: 0.74rem;
  color: var(--faint);
  margin-top: 0.15rem;
}
.ck__owner.is-you {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
@media (max-width: 560px) {
  .ck__status {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .ck__summary {
    white-space: normal;
  }
  .ck__item {
    grid-template-columns: 22px 1fr;
  }
  .ck__item.is-interactive {
    grid-template-columns: 1fr;
  }
  .ck__owner {
    grid-column: 2;
    justify-self: start;
  }
  .ck__item.is-interactive .ck__owner {
    grid-column: 1;
    margin-left: calc(22px + 0.9rem);
  }
}

/* ---- Grouped deliverables (rendered when file entries carry `group`) ---- */
.file-groups {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.fgroup__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.fgroup__head h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.fgroup__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.fgroup__head::after {
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1;
}

/* ===================================================================
   THEME TOGGLE — "water drop" circular reveal (ported from site.css)
   The new theme paints into an expanding circle from the toggle button
   (View Transitions API, driven by portal.js), with ripple rings riding
   the leading edge. Icon-spin fallback where unsupported; fully
   disabled under prefers-reduced-motion.
   =================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  /* Kill the default cross-fade — the JS clip-path animation does the reveal. */
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }

.theme-ripple {
  position: fixed;
  z-index: 9998;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  /* Matches the reveal: slow, steady, sine spread. */
  animation: theme-ripple 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}
@keyframes theme-ripple {
  0% { transform: scale(0); opacity: 0; }
  6% { opacity: var(--ring-op, 0.4); }
  100% {
    transform: scale(var(--ripple-scale, 60));
    opacity: 0;
  }
}
.theme-toggle.is-switching {
  animation: theme-toggle-spin 600ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.theme-toggle.is-switching svg {
  animation: theme-toggle-icon 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes theme-toggle-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes theme-toggle-icon {
  0%   { transform: scale(1) rotate(0);          opacity: 1; }
  40%  { transform: scale(0.2) rotate(-90deg);   opacity: 0; }
  60%  { transform: scale(0.2) rotate(90deg);    opacity: 0; }
  100% { transform: scale(1) rotate(0);          opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-ripple { display: none; }
}