/* ── Layers ──────────────────────────────────────────────── */
@layer base, layout, components, utilities;

/* ── Tokens ──────────────────────────────────────────────── */
@layer base {
  :root {
    --color-bg:        #f9f9f7;
    --color-surface:   #ffffff;
    --color-border:    #e0ddd8;
    --color-text:      #1a1a18;
    --color-muted:     #6b6860;
    --color-accent:    #2563eb;
    --color-accent-dk: #1d4ed8;
    --color-success:   #16a34a;
    --color-danger:    #dc2626;

    --radius:    0.5rem;
    --radius-sm: 0.25rem;
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    --font-sans: system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

    --transition: 150ms ease;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg:       #111110;
      --color-surface:  #1c1c1a;
      --color-border:   #2e2e2b;
      --color-text:     #e8e6e1;
      --color-muted:    #8a8880;
      --color-accent:   #60a5fa;
      --color-accent-dk:#93c5fd;
    }
  }

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

  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    line-height: 1.2;
    margin-block: 0 var(--space-sm);
  }

  h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }

  a { color: var(--color-accent); }

  p { margin-block: 0 var(--space-md); }
}

/* ── Layout ──────────────────────────────────────────────── */
@layer layout {
  .site-header {
    container-type: inline-size;
    position: relative;
    padding: var(--space-lg);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  /* Scale heading to header container width, not viewport */
  @container (width >= 0px) {
    .site-header h1 {
      font-size: clamp(1.2rem, 6cqi, 2rem);
    }
  }

  .site-header__text {
    min-inline-size: 0;
  }

  .site-header .tagline {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
  }

  /* Mobile-first: single column */
  .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
    max-width: 1200px;
    margin-inline: auto;
  }

  /* Two-column at 768px+ — viewport query is correct here */
  @media (width >= 768px) {
    .layout {
      grid-template-columns: minmax(320px, 2fr) 3fr;
      align-items: start;
    }

    .panel--full {
      grid-column: 1 / -1;
    }
  }

  .applications {
    container-type: inline-size;
    padding: var(--space-lg);
    padding-block-start: 0;
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* ── Components ──────────────────────────────────────────── */
@layer components {

  /* Panel — each panel is its own container */
  .panel {
    container-type: inline-size;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);
  }

  .panel h2 {
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
  }

  /* Form fields */
  .field {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
  }

  label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
  }

  input,
  select,
  textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color var(--transition), box-shadow var(--transition);

    &:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
    }
  }

  textarea {
    resize: vertical;
    field-sizing: content;
    min-block-size: 12lh;
  }

  /* Buttons — full-width by default */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition);
    width: 100%;

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  /* In wider panels/header: primary and save buttons shrink to content */
  @container (width >= 440px) {
    .btn--primary,
    .btn--save {
      width: auto;
    }
  }

  .btn--primary {
    background: var(--color-accent);
    color: #fff;

    &:hover:not(:disabled) {
      background: var(--color-accent-dk);
    }
  }

  .btn--save {
    background: var(--color-success);
    color: #fff;

    &:hover {
      background: color-mix(in srgb, var(--color-success) 85%, black);
    }
  }

  .row-actions {
    display: flex;
    gap: 0.4rem;
  }

  .resume-edit {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    block-size: 100%;
  }

  .resume-edit__preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .resume-edit__preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .resume-edit__preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
  }

  .resume-edit__preview-page {
    position: relative;
    max-height: 960px;
    overflow: hidden;
    background: #fff;
    color: #000;
    /* pin light-theme tokens so variable-based child styles don't bleed through */
    --color-text:   #1a1a18;
    --color-muted:  #6b6860;
    --color-accent: #2563eb;
    --color-border: #e0ddd8;
    box-shadow: 0 2px 16px rgb(0 0 0 / 0.12);
    outline: 1px solid var(--color-border);
    padding: var(--space-lg);

    &::after {
      content: '— page 1 boundary —';
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      text-align: center;
      font-size: 0.65rem;
      color: var(--color-muted);
      background: linear-gradient(transparent, #fff 40%);
      padding-block: var(--space-xl) var(--space-xs);
      pointer-events: none;
    }
  }

  .resume-edit__actions {
    display: flex;
    gap: var(--space-sm);
  }

  .suggestions-loading {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
  }

  .suggestions-content {
    font-size: 0.875rem;
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);

    & ul { margin: 0; padding-inline-start: var(--space-md); }
    & li { margin-block-end: var(--space-xs); }
  }

  .suggestions-actions {
    margin-block-start: var(--space-sm);
  }

  .proposal {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md);
    background: var(--color-surface);
  }

  .proposal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .proposal__btns {
    display: flex;
    gap: var(--space-sm);
  }

  .proposal__summary-label,
  .proposal__preview-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin-block-end: var(--space-xs);
  }

  .proposal__summary {
    font-size: 0.875rem;
    & ul {
      margin: 0;
      padding-inline-start: var(--space-lg);
      list-style: disc;
    }
    & li {
      display: list-item;
      margin-block-end: var(--space-xs);
    }
  }

  .proposal__preview {
    & .resume-edit__preview-page {
      max-height: none;
      overflow: visible;
      &::after { display: none; }
    }
  }

  .resume-edit__textarea {
    flex: 1;
    min-block-size: 60vh;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    resize: vertical;
  }

  .btn--edit {
    background: transparent;
    color: var(--color-text-muted, #666);
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;

    &:hover {
      background: var(--color-surface-hover, #f0f0f0);
    }
  }

  .btn--danger {
    background: var(--color-danger);
    color: #fff;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;

    &:hover {
      background: color-mix(in srgb, var(--color-danger) 85%, black);
    }
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-muted);
    border: 1px solid var(--color-border);

    &:hover {
      background: var(--color-bg);
    }
  }

  /* Delete confirmation dialog */
  dialog {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-xl);
    max-inline-size: 400px;
    inline-size: 90%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
    /* Animate out on close */
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.25s ease, transform 0.25s ease,
                display 0.25s ease allow-discrete,
                overlay 0.25s ease allow-discrete;
  }

  /* Animate in on open */
  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: translateY(-12px) scale(0.97);
    }
  }

  dialog::backdrop {
    background: rgb(0 0 0 / 0.45);
    transition: background 0.2s ease,
                display 0.2s ease allow-discrete,
                overlay 0.2s ease allow-discrete;
  }

  @starting-style {
    dialog[open]::backdrop {
      background: rgb(0 0 0 / 0);
    }
  }

  .modal__message {
    margin-block-end: var(--space-lg);
    font-size: 1rem;
  }

  .modal__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
  }

  .qr-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    & h3 { margin: 0; }
  }

  .qr-canvas img,
  .qr-canvas canvas {
    display: block;
    border-radius: var(--radius-sm);
  }

  .qr-url {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 0;
    word-break: break-all;
  }

  .btn--view {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;

    &:hover {
      background: var(--color-accent);
      color: #fff;
    }
  }

  /* Save panel — stacked by default, horizontal when panel is wide */
  .save-panel {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-border);

    & h3 {
      margin-block-end: var(--space-md);
      color: var(--color-success);
    }
  }

  @container (width >= 440px) {
    .save-panel {
      display: flex;
      align-items: flex-end;
      gap: var(--space-md);

      & h3 {
        flex-basis: 100%;
      }

      & .field {
        flex: 1;
        margin-block-end: 0;
      }
    }
  }

  /* Resume output panel */
  .resume-output {
    position: relative;
    min-block-size: 20rem;
  }

  /* One-page view: clip to page height, paper-frame treatment */
  .resume-output.has-page-marker {
    max-height: 960px;
    overflow: hidden;
    background: #fff;
    color: #000;
    --color-text:   #1a1a18;
    --color-muted:  #6b6860;
    --color-accent: #2563eb;
    --color-border: #e0ddd8;
    box-shadow: 0 2px 20px rgb(0 0 0 / 0.15);
    outline: 1px solid var(--color-border);
    padding: var(--space-lg);
  }

  .resume-output.has-page-marker::after {
    content: '— 1 page —';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    text-align: center;
    font-size: 0.65rem;
    color: var(--color-muted);
    background: linear-gradient(transparent, #fff 40%);
    padding-block: var(--space-xl) var(--space-xs);
    pointer-events: none;
  }

  .placeholder {
    color: var(--color-muted);
    font-style: italic;
    text-align: center;
    padding-block: var(--space-2xl);
  }

  /* Streaming pre */
  .resume-stream {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: var(--space-md);
    background: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    min-block-size: 10rem;
  }

  /* Rendered resume */
  .resume-rendered {
    font-size: 0.9rem;
    line-height: 1.7;

    & h1 { font-size: 1.4rem; margin-block: 0 var(--space-xs); }
    & h2 {
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-accent);
      border-block-end: 1px solid var(--color-border);
      padding-block-end: var(--space-xs);
      margin-block: var(--space-lg) var(--space-sm);
    }
    & h3 { font-size: 0.95rem; margin-block: var(--space-sm) var(--space-xs); }
    & ul { padding-inline-start: var(--space-lg); margin-block: var(--space-xs) var(--space-md); }
    & li { margin-block-end: var(--space-xs); }
    & p  { margin-block: 0 var(--space-sm); }
    & strong { color: var(--color-text); }
  }

  /* Error message */
  .error {
    color: var(--color-danger);
    font-weight: 600;
    padding: var(--space-md);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  }

  /* Applications table */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  caption {
    color: var(--color-muted);
    font-style: italic;
    padding-block-end: var(--space-sm);
    text-align: left;
  }

  th, td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-block-end: 1px solid var(--color-border);
  }

  th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
  }

  tbody tr {
    transition: background var(--transition);

    &:hover {
      background: color-mix(in srgb, var(--color-accent) 5%, transparent);
    }
  }

  .app-role-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    &:hover { text-decoration: underline; }
  }

  .app-status-date {
    display: block;
    font-size: 0.7rem;
    color: var(--color-muted);
    margin-block-start: 0.15em;
  }

  .app-location {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-block-start: 0.1em;
  }

  /* Status select in table */
  tbody select {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
    width: auto;
  }

  /* Narrow applications container: stack rows as cards */
  @container (width < 600px) {
    thead { display: none; }

    tbody tr {
      display: block;
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      margin-block-end: var(--space-sm);
      padding: var(--space-xs) 0;

      &:hover { background: transparent; }
    }

    tbody td {
      display: flex;
      align-items: baseline;
      gap: var(--space-sm);
      border-block-end: none;
      padding-block: var(--space-xs);

      &[data-label]::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-muted);
        min-inline-size: 4.5rem;
        flex-shrink: 0;
      }
    }

    td.row-actions {
      flex-wrap: wrap;
      padding-block-start: var(--space-sm);
      border-block-start: 1px solid var(--color-border);
      margin-block-start: var(--space-xs);
    }
  }
}

/* ── Utilities ───────────────────────────────────────────── */
@layer utilities {
  [data-show="false"],
  [hidden] { display: none !important; }
}

/* ── Landing page ────────────────────────────────────────── */
@layer components {

  .landing-body {
    --hero-bg: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
  }

  .landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .landing-nav__brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
    text-decoration: none;
  }

  .landing-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.9rem;
  }

  .landing-nav__links a:not(.btn) {
    color: var(--color-muted);
    text-decoration: none;
    &:hover { color: var(--color-text); }
  }

  .hero {
    background: var(--hero-bg);
    padding: var(--space-2xl) var(--space-lg);
    border-block-end: 1px solid var(--color-border);
  }

  .hero__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }

  .hero__headline {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-md);
  }

  .hero__sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--color-muted);
    margin-block-end: var(--space-xl);
    line-height: 1.7;
  }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-block-end: var(--space-md);
  }

  .hero__note {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 0;
  }

  /* Button size modifiers */
  .btn--sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    width: auto;
  }

  .btn--lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    width: auto;
  }

  .section-inner {
    max-width: 800px;
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-lg);
  }

  .section-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    text-align: center;
    margin-block-end: var(--space-sm);
  }

  .section-sub {
    text-align: center;
    color: var(--color-muted);
    margin-block-end: var(--space-xl);
  }

  /* How it works steps */
  .how-it-works {
    border-block-end: 1px solid var(--color-border);
  }

  .steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-xl);
  }

  @media (width >= 600px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
  }

  .step {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }

  .step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .step__body h3 { margin-block-end: var(--space-xs); }
  .step__body p  { color: var(--color-muted); font-size: 0.9rem; margin: 0; }

  /* Pricing */
  .pricing {
    background: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
    border-block-end: 1px solid var(--color-border);
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  @media (width >= 560px) {
    .pricing-grid { grid-template-columns: 1fr 1fr; }
  }

  .pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-xl);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .pricing-card--pro {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
  }

  .pricing-card__badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
  }

  .pricing-card__header h3 {
    margin: 0 0 var(--space-xs);
    font-size: 1.1rem;
  }

  .pricing-card__price {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: var(--color-text);
  }

  .pricing-card__period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-muted);
  }

  .pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;

    & li {
      font-size: 0.9rem;
      color: var(--color-muted);
      padding-inline-start: 1.25em;
      position: relative;

      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--color-success);
        font-weight: 700;
      }
    }
  }

  .pricing-card .btn { width: 100%; }

  /* Footer */
  .landing-footer {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-muted);
    & p { margin: 0; }
    & a { color: var(--color-muted); }
  }

  /* ── Auth pages ──────────────────────────────────────────── */

  .auth-body {
    min-block-size: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
  }

  .auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-xl);
    width: 100%;
    max-width: 400px;
  }

  .auth-card__brand {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-accent);
    text-decoration: none;
    margin-block-end: var(--space-lg);
  }

  .auth-card__heading {
    font-size: 1.4rem;
    margin-block-end: var(--space-xs);
  }

  .auth-card__sub {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-block-end: var(--space-lg);
  }

  .auth-field {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
  }

  .auth-card .btn--primary { width: 100%; margin-block-start: var(--space-sm); }

  .auth-card__footer {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-muted);
    text-align: center;
    & a { color: var(--color-accent); }
  }

  .auth-error {
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    margin-block-end: var(--space-md);
  }

  .auth-note {
    color: var(--color-muted);
    font-size: 0.9rem;
    & .btn { margin-block-start: var(--space-md); }
  }

  /* ── App header additions ────────────────────────────────── */

  .site-header {
    padding-block: var(--space-sm);
  }

  .site-header__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    position: relative;
  }

  .page-toolbar {
    padding: var(--space-md) var(--space-lg);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
  }

  .user-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.85rem;
  }

  .user-nav__email {
    color: var(--color-muted);
    font-size: 0.78rem;
    padding-inline-end: var(--space-sm);
    border-inline-end: 1px solid var(--color-border);
  }

  .user-nav__upgrade { color: var(--color-accent); font-weight: 600; text-decoration: none; font-size: 0.8rem; }
  .user-nav__manage  { color: var(--color-muted);  text-decoration: none; font-size: 0.8rem; }

  /* Mobile: hamburger + floating card dropdown */
  @container (width < 600px) {
    .site-header .tagline { display: none; }

    .nav-toggle { display: flex; }

    .user-nav {
      display: none;
      flex-direction: column;
      align-items: stretch;
      position: absolute;
      inset-block-start: calc(100% + var(--space-xs));
      inset-inline-end: 0;
      min-inline-size: 200px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
      padding: var(--space-xs) 0;
      gap: 0;
      z-index: 50;
    }

    .user-nav--open { display: flex; }

    .user-nav__email {
      padding: var(--space-sm) var(--space-md);
      border-inline-end: none;
      border-block-end: 1px solid var(--color-border);
      margin-block-end: var(--space-xs);
    }

    .user-nav__upgrade,
    .user-nav__manage {
      padding: var(--space-sm) var(--space-md);
      font-size: 0.875rem;
    }

    .user-nav > .btn {
      border-radius: 0;
      border: none;
      justify-content: flex-start;
      padding: var(--space-sm) var(--space-md);
      font-size: 0.875rem;
    }

    .user-nav > form { margin: 0; }
    .user-nav > form > button {
      width: 100%;
      border-radius: 0;
      border: none;
      justify-content: flex-start;
      padding: var(--space-sm) var(--space-md);
      font-size: 0.875rem;
    }
  }

  .plan-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: var(--color-accent);
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
  }

  .plan-badge--free {
    background: var(--color-muted);
  }

  .quota-banner {
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
    border-block-end: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
    color: var(--color-danger);
    font-size: 0.875rem;
    padding: var(--space-sm) var(--space-lg);
    text-align: center;
    & a { color: var(--color-danger); font-weight: 600; }
  }

  /* ── Admin layout ────────────────────────────────────────── */

  .admin-layout {
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .admin-section {
    container-type: inline-size;
  }

  .admin-section h2 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin-block-end: var(--space-md);
  }

  .admin-search {
    margin-block-end: var(--space-md);
    max-width: 320px;
  }

  /* Narrow admin users table: stack rows as cards */
  @container (width < 640px) {
    #admin-users-table thead { display: none; }

    #admin-users-table tbody tr {
      display: block;
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      margin-block-end: var(--space-sm);
      padding: var(--space-xs) 0;

      &:hover { background: transparent; }
    }

    #admin-users-table tbody td {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      border-block-end: none;
      padding-block: var(--space-xs);

      &[data-label]::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-muted);
        min-inline-size: 5.5rem;
        flex-shrink: 0;
      }
    }

    #admin-users-table td.row-actions {
      flex-wrap: wrap;
      padding-block-start: var(--space-sm);
      border-block-start: 1px solid var(--color-border);
      margin-block-start: var(--space-xs);
    }
  }

  .stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
  }

  .stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-lg);
  }

  .stat-card__value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
  }

  .stat-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0;
  }

  .resume-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-md);
    & h2 { margin: 0; }
  }

  .resume-output-header__actions {
    display: flex;
    gap: var(--space-sm);
  }

  .one-page-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-muted);
    cursor: pointer;
    margin-block-end: var(--space-md);
  }
}

/* ── Print / PDF ─────────────────────────────────────────── */
@media print {
  @page { size: letter portrait; margin: 0.5in; }
  .site-header,
  .page-toolbar,
  .quota-banner,
  .panel--form,
  .applications,
  .resume-output-header,
  dialog { display: none !important; }

  body, .layout, .panel--output {
    display: block !important;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    box-shadow: none;
    border: none;
  }

  .panel--output {
    padding: 0.5in;
  }

  .resume-rendered {
    font-size: 11pt;
    line-height: 1.5;

    & h1 { font-size: 18pt; }
    & h2 { font-size: 11pt; color: #000; border-block-end: 1px solid #ccc; }
    & a  { color: #000; text-decoration: none; }
  }
}