/* Shared PocketPlay product and editorial surfaces. All colours use kit tokens. */
.platform { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 var(--pp-font); }
.platform * { box-sizing:border-box; }
.platform a { color:inherit; text-decoration:none; }
.platform a:hover { color:var(--sig-ink); }
.platform button,.platform input,.platform select,.platform textarea { font:inherit; }
.platform h1,.platform h2,.platform h3,.platform p { margin:0; }
.platform h1 { font-size:clamp(30px,4.8vw,54px); line-height:1.12; letter-spacing:-.035em; font-weight:600; text-wrap:balance; }
.platform h2 { font-size:23px; line-height:1.3; letter-spacing:-.025em; font-weight:600; }
.platform h3 { font-size:17px; line-height:1.35; font-weight:600; }
.platform-bar { min-height:76px; border-bottom:1px solid var(--line-2); padding:16px max(24px,calc((100vw - 1320px)/2)); display:flex; gap:30px; align-items:center; background:var(--paper); }
.platform-brand { display:flex; align-items:center; gap:11px; font-size:17px; font-weight:650; white-space:nowrap; }
.platform-mark { background:var(--ink); color:var(--paper); width:30px; height:32px; display:inline-flex; position:relative; align-items:center; justify-content:center; font-size:20px; font-family:var(--pp-serif); }
.platform-mark span { position:absolute; width:7px; height:7px; background:var(--sig); border:1px solid var(--paper); bottom:4px; right:3px; border-radius:50%; }
.platform-bar nav { display:flex; gap:22px; flex:1; align-items:center; font-size:13px; }
.platform-bar-end { display:flex; gap:16px; font-size:13px; align-items:center; }
.theme-button { color:var(--ink); background:none; border:0; cursor:pointer; font-size:22px!important; padding:4px; }
.account-link { padding:7px 12px; border:1px solid var(--line-2); border-radius:var(--r-1); }
.platform-main { max-width:1232px; margin:auto; padding:44px 24px 76px; min-height:65vh; }
.eyebrow { font:11px/1.5 var(--pp-mono); color:var(--ink-2); text-transform:uppercase; letter-spacing:.11em; margin-bottom:14px!important; }
.home-intro { max-width:820px; margin-bottom:36px; }
.home-intro h1 { font:clamp(38px,5vw,64px)/1.1 var(--pp-serif); letter-spacing:-.03em; }
.lede { margin-top:18px!important; font-size:17px; line-height:1.65; color:var(--ink-2); max-width:760px; }
.destination-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line-2); background:var(--panel); }
.destination { padding:26px; min-height:235px; display:flex; flex-direction:column; position:relative; border-right:1px solid var(--line-2); transition:background .15s; }
.destination:last-child { border-right:0; }
.destination:hover { background:var(--hover); }
.destination-number { font:12px var(--pp-mono); color:var(--ink-3); margin-bottom:25px; }
.destination h2 { font-size:23px; max-width:220px; }
.destination p { color:var(--ink-2); font-size:13px; margin-top:12px; }
.destination-arrow { font-size:24px; margin-top:auto; padding-top:18px; align-self:flex-end; }
.destination-grid.two { grid-template-columns:1fr 1fr; margin-top:30px; }
.destination.compact { min-height:155px; }
.destination.compact>span:last-child { margin-top:16px; align-self:flex-end; }
.reflection-feature { margin-top:28px; background:var(--sunk); border:1px solid var(--line); padding:24px 28px; display:flex; gap:24px; align-items:center; justify-content:space-between; }
.reflection-feature p:not(.eyebrow) { color:var(--ink-2); margin-top:8px; }
.reflection-feature .eyebrow { margin-bottom:7px!important; }
.action { display:inline-flex; justify-content:center; align-items:center; padding:11px 16px; border:1px solid var(--line-2); border-radius:var(--r-1); background:var(--panel); color:var(--ink); font-size:13px!important; line-height:1.4; font-weight:550; cursor:pointer; text-decoration:none; white-space:normal; }
.action:hover { background:var(--hover); }
.action.primary { background:var(--sig-ink); color:var(--raised); border-color:var(--sig-ink); }
.action.primary:hover { opacity:.9; color:var(--raised); }
:root[data-theme="dark"] .action.primary { background:var(--sig); color:var(--paper); border-color:var(--sig); }
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .action.primary{background:var(--sig);color:var(--paper);border-color:var(--sig)}}
.action:disabled { opacity:.55; cursor:wait; }
.section { margin-top:38px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.section-heading>a { font-size:13px; color:var(--ink-2); }
.quick-tools { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.quick-tools a { padding:16px 18px; border:1px solid var(--line-2); font-size:13px; display:flex; justify-content:space-between; }
.article-list { border-top:1px solid var(--line-2); }
.article-row { display:flex; padding:22px 0; gap:30px; align-items:flex-start; border-bottom:1px solid var(--line-2); }
.article-date { font:11px/1.5 var(--pp-mono); color:var(--ink-3); min-width:85px; padding-top:3px; }
.article-row>div { flex:1; }
.article-row p { font-size:13px; color:var(--ink-2); margin-top:6px; max-width:780px; }
.article-arrow { font-size:22px; }
.community-invite { margin-top:46px; padding:30px 0; border-top:1px solid var(--line-2); }
.community-invite p { color:var(--ink-2); margin:12px 0 20px; }
.quiet-link { font-size:13px; color:var(--ink-2)!important; margin-left:22px; }
.platform-footer { border-top:1px solid var(--line-2); padding:28px max(24px,calc((100vw - 1184px)/2)); font-size:12px; color:var(--ink-2); }
.platform-footer>div,.platform-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
.platform-footer nav { margin-top:16px; }
.page-intro { max-width:850px; margin-bottom:32px; }
.work-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:28px; align-items:start; }
.workspace { background:var(--panel); padding:28px; border:1px solid var(--line-2); }
.context { padding:24px; background:var(--sunk); border-top:2px solid var(--sig); font-size:13px; }
.context ul { padding-left:20px; color:var(--ink-2); margin:16px 0; }
.context li { margin:9px 0; }
.context>p:not(.eyebrow) { margin-top:14px; color:var(--ink-2); }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field>span { font-size:12px; font-weight:550; }
.field input,.field textarea,.field select { display:block; width:100%; border:1px solid var(--line-2); border-radius:var(--r-1); padding:11px 12px; background:var(--raised); color:var(--ink); outline:none; }
.field textarea { resize:vertical; line-height:1.7; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--sig); box-shadow:0 0 0 2px var(--sig-soft); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-actions,.next-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0; }
.muted { font-size:12px; color:var(--ink-2); }
.ai-status { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.ai-status strong { display:block; font-size:14px; }
.ai-status span { display:block; font-size:12px; color:var(--ink-2); margin-top:4px; }
.ai-result { margin-top:24px; padding-top:22px; border-top:1px solid var(--line-2); }
.ai-answer { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; font-size:14px; }
.ai-result .plan { margin-top:16px; flex-wrap:wrap; }
.metric-list { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:18px; font-size:13px; }
.metric-list strong { font:24px var(--pp-mono); display:block; }
.plan { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line-2); padding:20px 0; }
.plan h3 { margin-bottom:6px; }
.plan .eyebrow { margin-bottom:5px!important; }
.plan>div:last-child { text-align:right; }
.plan-price { font:28px var(--pp-mono); }
.plan-price small { font:12px var(--pp-font); }
.plan .muted { margin:6px 0 12px; }
.filter-form { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; }
.filter-form .field { max-width:220px; flex:1 1 150px; margin:0; }
.table-scroll { overflow-x:auto; margin:20px 0; border:1px solid var(--line-2); }
.table-scroll table { border-collapse:collapse; min-width:1000px; width:100%; font-size:12px; }
.table-scroll th,.table-scroll td { padding:13px; border-bottom:1px solid var(--line); text-align:left; }
.table-scroll th { background:var(--sunk); font-weight:550; white-space:nowrap; }
.table-scroll tbody tr:hover { background:var(--hover); }
.reading { max-width:780px; margin:0 auto; }
.reading>h1,.account-card h1 { margin-top:16px; }
.reading>.eyebrow { margin-top:24px; }
.reading h1 { font-size:clamp(30px,4.5vw,46px); }
.back-link { font-size:12px; color:var(--ink-2)!important; }
.prose { margin-top:32px; line-height:1.9; font-size:16px; }
.prose h2 { margin:34px 0 14px; }
.prose h3,.prose h4 { margin:28px 0 12px; }
.prose p { margin:16px 0; }
.prose a,.sources a,.post-text a { text-decoration:underline; text-underline-offset:3px; }
.prose li { margin:7px 0; }
.prose pre { overflow-x:auto; background:var(--sunk); padding:18px; font:13px/1.6 var(--pp-mono); }
.prose .table-scroll table{min-width:0}.prose .table-scroll td,.prose .table-scroll th{min-width:100px;overflow-wrap:anywhere}
.prose code { font-family:var(--pp-mono); font-size:.85em; }
.prose blockquote { border-left:3px solid var(--sig); margin:20px 0; padding:1px 22px; color:var(--ink-2); }
.article-next { margin-top:36px; padding:24px; border:1px solid var(--line-2); background:var(--sunk); }
.article-next>h2,.sources h2 { font-size:20px; }
.sources { margin-top:36px; border-top:1px solid var(--line-2); padding-top:26px; font-size:13px; }
.sources li { margin:12px 0; }
.sources small { display:block; color:var(--ink-3); }
.category-links { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.category-links>a { padding:7px 12px; border:1px solid var(--line-2); font-size:12px; border-radius:var(--r-1); }
.category-links>[aria-current] { background:var(--sig-soft); color:var(--sig-ink); border-color:var(--sig); }
.thread-row { display:flex; align-items:flex-start; gap:22px; border-top:1px solid var(--line-2); padding:23px 0; }
.thread-row>div { flex:1; }
.thread-row h2 { font-size:18px; }
.thread-row p { font-size:12px; color:var(--ink-2); margin-top:7px; }
.thread-category { padding:4px 8px; background:var(--sunk); font-size:11px; min-width:90px; }
.empty { padding:36px 20px; border:1px dashed var(--line-2); }
.empty p { color:var(--ink-2); margin-top:12px; }
.pagination { display:flex; justify-content:space-between; margin-top:22px; }
.account-card { max-width:500px; margin:0 auto; padding:30px; border:1px solid var(--line-2); background:var(--panel); }
.account-card h1 { font-size:32px; }
.account-card .lede { margin-bottom:26px; font-size:14px; }
.account-card h2 { font-size:20px; margin:24px 0 16px; }
.account-options { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:12px; }
.check { display:flex; align-items:flex-start; gap:10px; font-size:12px; margin:20px 0; }
.honey { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(100%); }
.notice { padding:16px; background:var(--sunk); border-left:3px solid var(--sig); margin:16px 0!important; }
.notice.error { border-color:var(--err); }
.recovery-code { display:block; padding:12px; background:var(--panel); font-family:var(--pp-mono); overflow-wrap:anywhere; margin-top:14px; }
.post-text { margin-top:24px; line-height:1.9; overflow-wrap:anywhere; }
.replies { margin-top:36px; border-top:1px solid var(--line-2); padding-top:24px; }
.reply { padding:22px 0; border-bottom:1px solid var(--line); }
.replies form { margin-top:24px; }
.report { font-size:12px; margin-top:25px; }
.moderation-actions { display:flex; flex-wrap:wrap; gap:10px; }
.directory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.directory-link { padding:16px; border:1px solid var(--line-2); }
.source-fields{display:grid;grid-template-columns:1fr 1.4fr 150px;gap:12px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.platform [hidden] { display:none!important; }
.platform :focus-visible { outline:2px solid var(--sig); outline-offset:3px; }
.pp-network { background:var(--paper,#f3f1ec); color:var(--ink,#15140f); border-top:1px solid var(--line-2,rgba(21,20,15,.18)); padding:18px 24px; margin-top:24px; font:13px/1.6 var(--pp-font,system-ui); display:flex; flex-wrap:wrap; justify-content:center; gap:20px; position:relative; z-index:1; }
.pp-network a { color:inherit; text-decoration:none; }
.pp-network a:hover { text-decoration:underline; }
.platform .pp-network { display:none; }
@media(max-width:1000px) {
 .platform-bar { flex-wrap:wrap; gap:16px; padding:16px 24px; }
 .platform-bar nav { order:3; width:100%; flex-basis:100%; overflow-x:auto; gap:22px; white-space:nowrap; padding-top:9px; }
 .platform-bar-end { margin-left:auto; }
 .destination-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .destination:nth-child(2) { border-right:0; }
 .destination:nth-child(-n+2) { border-bottom:1px solid var(--line-2); }
 .destination-grid.two .destination { border-bottom:0; }
 .work-layout { grid-template-columns:minmax(0,1fr); }
 .context { padding:22px; }
 .quick-tools { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
 .platform-main { padding:30px 18px 48px; }
 .platform-bar { padding:12px 18px; }
 .platform-brand { font-size:15px; }
 .platform-bar-end { gap:12px; }
 .platform-bar nav { gap:18px; font-size:12px; }
 .home-intro { margin-bottom:28px; }
 .lede { font-size:15px; }
 .destination { padding:18px; min-height:235px; }
 .destination h2 { font-size:20px; }
 .destination-number { margin-bottom:18px; }
 .destination p { font-size:12px; }
 .reflection-feature { flex-direction:column; align-items:flex-start; padding:22px; }
 .section-heading h2 { font-size:21px; }
 .article-row { gap:14px; flex-wrap:wrap; }
 .article-date { width:100%; }
 .article-row>div { flex-basis:85%; }
 .article-row h3 { font-size:16px; }
 .quiet-link { display:block; margin:16px 0 0; }
 .workspace { padding:20px; }
 .form-grid { grid-template-columns:1fr; }
 .plan { flex-direction:column; }
 .plan>div:last-child { text-align:left; }
 .destination-grid.two { grid-template-columns:1fr; }
 .destination-grid.two .destination { border-right:0; }
 .destination-grid.two .destination:first-child { border-bottom:1px solid var(--line-2); }
 .thread-row { gap:12px; flex-wrap:wrap; }
 .thread-category { min-width:0; }
 .thread-row>div { flex-basis:75%; }
 .account-card { padding:22px; }
 .directory-grid { grid-template-columns:1fr; }
 .source-fields{grid-template-columns:1fr}
 .platform-footer { padding:24px 18px; }
 .filter-form .action { width:100%; }
}
