/* Pathfinder app layout. Layout only — every color, size and radius comes from tokens.css; components from bundle.css. */
:root { --font-serif: "Source Serif 4"; }
html, body { min-height: 100%; }
.page { max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-4) calc(var(--space-8) * 2); }
.page-narrow { max-width: 640px; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips.col { flex-direction: column; align-items: stretch; }
.small { font-size: 12px; line-height: 16px; }
.section-heading { font-size: 28px; line-height: 32px; margin: 0 0 var(--space-2); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--color-accent); cursor: pointer; }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }

/* nav */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); max-width: 1280px; margin: 0 auto; }
.nav-brand { font-family: var(--font-heading); font-weight: 600; font-size: 18px; margin-right: auto; color: inherit; text-decoration: none; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent); }
.nav form { display: inline; }
.avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-neutral-300); color: var(--color-text); font-size: 12px; font-weight: 600; }

/* auth */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-4); gap: var(--space-4); }
.auth-card { width: 100%; max-width: 420px; }
.auth .brand { font-family: var(--font-heading); font-weight: 600; font-size: 22px; margin-bottom: var(--space-6); }
.auth-foot { font-style: italic; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12px; color: var(--color-neutral-700); }

/* filters, tabs */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--space-3) 0; }
.chip { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; transition: background 150ms ease-out; }
.chip:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.chip-on { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-divider); margin: var(--space-3) 0; }
.tab { font: inherit; font-size: 14px; padding: 8px 0; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--color-neutral-700); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-text); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.seg-opt { font: inherit; font-size: 13px; padding: 7px 12px; background: transparent; border: 0; color: var(--color-text); cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt.on { background: var(--color-accent); color: var(--color-bg); }

/* report */
.report-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--space-6); align-items: start; }
.job-list { display: flex; flex-direction: column; gap: var(--space-2); }
.pf-job { cursor: pointer; }
.pf-job-current { outline: 1px solid var(--color-neutral-400); }
.detail { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.detail-close { display: none; align-self: flex-end; }
.detail-row { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.detail-match { display: flex; gap: var(--space-2); align-items: center; }
.why { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.why li { display: flex; gap: var(--space-2); align-items: center; font-size: 14px; }
.report-foot { position: sticky; bottom: 0; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--space-2) var(--space-3); margin-top: var(--space-4); background: var(--color-bg); border-top: 1px solid var(--color-divider); font-size: 14px; }
.report-empty { max-width: 560px; margin: var(--space-8) auto; }
.report-empty .pf-state-title { font-size: 40px; line-height: 44px; color: var(--color-neutral-500); }

/* workspace */
.crumbs { margin-bottom: var(--space-2); }
.ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.ws-actions { display: flex; gap: var(--space-2); align-items: center; }
.mode-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-500); }
.mode-dot[data-mode="focus"] { background: var(--pf-match); }
.mode-dot[data-mode="assist"] { background: var(--pf-easy); }
.ws-body { max-width: 680px; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 680px) 280px; gap: var(--space-6); align-items: start; }
.editor { display: flex; flex-direction: column; gap: var(--space-2); }
.editor-head { display: flex; justify-content: space-between; align-items: baseline; }
.pf-para p[contenteditable] { outline: none; }
.pf-para p[contenteditable]:focus { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.para-tools { display: none; gap: 4px; margin-top: 4px; }
.pf-para:hover .para-tools, .pf-para:focus-within .para-tools { display: flex; }
.picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); padding: var(--space-2); background: var(--color-surface); border-radius: var(--radius-md); }
.cite-panel { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.strategy, .timeline { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.timeline { list-style: none; padding: 0; }
.timeline li { display: flex; gap: var(--space-2); }

/* tracker */
.board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: var(--space-3); overflow-x: auto; }
.col { display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; padding: var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.tcard { cursor: grab; }
.tcard-head { display: flex; gap: 8px; align-items: center; }
.tcard .card-title { font-size: 15px; color: inherit; text-decoration: none; }
.small-select { min-height: 30px; font-size: 12px; padding: 3px 6px; }

/* vault */
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }

/* onboarding */
.onboarding { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.dots { display: flex; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-300); }
.dot.on { background: var(--color-text); }
.ob-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items: start; }
.ob-grid.wide { grid-template-columns: 1fr 1fr; }
.rank-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); }
.rank-num { font-family: var(--font-heading); font-weight: 600; font-size: 28px; width: 32px; color: var(--color-neutral-500); }
.rank-row:first-child .rank-num { color: var(--color-text); }
.rank-fields { flex: 1; display: grid; gap: 6px; }
.rank-btns { display: flex; gap: 2px; }

/* dialog */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); z-index: 10; }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

@media (max-width: 900px) {
  .report-grid, .ws-grid, .ob-grid, .ob-grid.wide { grid-template-columns: 1fr; }
  .detail { position: fixed; inset: auto 0 0 0; max-height: 80vh; overflow: auto; background: var(--color-bg); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform 150ms ease-out; z-index: 5; }
  .detail-open { transform: none; }
  .detail-close { display: inline-flex; }
  .nav { gap: var(--space-2); flex-wrap: wrap; }
  .board { grid-template-columns: repeat(6, 220px); }
}


/* static-screen additions — layout helpers only; components come from bundle.css */
.pf-filters{display:flex;gap:6px;flex-wrap:wrap;margin:var(--space-3) 0}
.pf-week{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap}.pf-week h1{margin:0;font-size:32px;line-height:36px;font-weight:600}.pf-week-sub{font-size:14px;color:var(--color-neutral-700)}.pf-week-actions{display:flex;gap:8px;align-items:center}
.kanban{display:grid;grid-template-columns:repeat(6,minmax(160px,1fr));gap:var(--space-3);margin-top:var(--space-4);overflow-x:auto}.kanban-col{display:flex;flex-direction:column;gap:var(--space-2);min-height:260px;padding:var(--space-2);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-text) 3%,transparent)}.kanban-head{display:flex;justify-content:space-between;font-size:13px;padding:4px 6px 6px;color:var(--color-neutral-700)}.kanban-empty{color:var(--color-neutral-500);text-align:center;padding:20px 0;font-size:13px}
.auth-wide{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);max-width:1180px;margin:0 auto;padding:var(--space-8) var(--space-6);min-height:100vh;align-items:center}
.auth-form{width:100%;max-width:420px;margin:0 auto}
.static a{pointer-events:none}
@media(max-width:900px){.auth-wide{grid-template-columns:1fr}}