/* Zoo Town — trader and paper pages. Loaded after the numbers pages' stack (styles.css, round2-8.css, live-data.css,
   shared/pages.css; the header's current page is marked there):
   header, footer, hero, buttons, section headings, dashboard panels, holdings table, trade log, Zoo Chat,
   company dialog and the closing landscape are his classes. This file only adds what the town needs. */
:root{--fine:#63707f;--up:#087e63;--down:#c45c4e;--hh:#4a8ee8;--serif:"Iowan Old Style",Georgia,"Times New Roman",serif;--hill-far:#dcebf5;--hill-mid:#d3e9e6}
body.pg{background:#fff;overflow-x:hidden}
.pg img{max-width:100%}
.pg-num{font-variant-numeric:tabular-nums}
.pg-up{color:var(--up)}.pg-down{color:var(--down)}.pg-flat{color:var(--muted)}
.pg-empty{font-size:13px;color:var(--muted);margin:6px 0 0}
.pg-notice{margin:10px auto 0;padding:9px 14px;border-radius:12px;background:#eef4ff;color:#34507e;font-size:12px}
.footer-links{display:flex;gap:16px;font-size:11px}
.footer-links a{text-decoration:none;color:#5d7466}.footer-links a:hover{color:var(--green)}
.skip-link{border-radius:10px;box-shadow:0 6px 20px #16213b26}
.tp-center{text-align:center;margin-top:28px}

/* ---- art boxes: fixed aspect, anchored bottom-center; a missing file shows its stand-in drawing ---- */
.pg-art{position:relative;display:block;aspect-ratio:var(--ar,1);width:100%}
.pg-art>img,.pg-art>.fb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.pg-art>.fb>svg{width:100%;height:100%;display:block;overflow:visible}
.pg-art.missing{border:1.5px dashed #c9b8e6;border-radius:14px;background:repeating-linear-gradient(135deg,#f6f0ff 0 8px,#efe6fd 8px 16px);overflow:hidden}
.pg-art.missing>img{display:none}
.pg-art.missing::after{content:attr(data-art);position:absolute;inset:auto 3px 3px;font:600 9px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6a58a0;text-align:center;overflow-wrap:anywhere}

/* ---- portraits in a felt badge; paw + initial fallback ---- */
.pg-badge{position:relative;display:block;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0,color-mix(in srgb,var(--hh) 22%,#fff) 100%);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--hh),0 10px 22px #29354c24;overflow:hidden}
.pg-badge img{position:absolute;inset:6% 6% 0;width:88%;height:94%;object-fit:cover;object-position:50% 12%}
.pg-badge.missing img{display:none}
.pg-badge .pg-paw{display:none}
.pg-badge.missing .pg-paw{display:grid;position:absolute;inset:0;place-items:center;background:var(--hh);color:#fff}
.pg-paw svg{width:52%;height:52%;opacity:.95}
.pg-paw b{position:absolute;right:16%;bottom:14%;font-size:clamp(10px,28%,22px);font-weight:800;line-height:1}

/* ---- cards in his panel style ---- */
.pg-card{background:#fff;border:1px solid #e4eaf3;border-radius:13px;padding:16px 18px}
.pg-card>h3{font-size:15px;margin:0 0 4px;color:#253455;letter-spacing:-.1px}
.pg-sub{font-size:11px;line-height:1.7;color:var(--fine);margin:0 0 12px}

/* =================== TRADER PAGE =================== */
.tp-notice{padding-top:14px}
.tp-hero .hero-grid{min-height:560px;grid-template-columns:.92fr 1.08fr;gap:36px}
.tp-hero .hero-copy{padding:44px 0 52px}
.tp-hero h1{font-size:clamp(42px,4.1vw,58px)}
.tp-hero h2{font-size:20px;margin-top:14px}
.tp-hero .hero-description{max-width:430px}
.hero-features .feature-icon svg{width:22px;height:22px}
.tp-hero .hero-features>div:first-child,.tp-hero .hero-features>div:last-child{order:0}
.tp-stagewrap{position:relative;padding:30px 0 40px}
/* the diorama: his hero sky, far hills, a stitched meadow. Items are placed in % of the stage box. */
.tp-stage{position:relative;aspect-ratio:16/11;border-radius:30px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 83% 12%,#fff0e1 0,transparent 46%),radial-gradient(ellipse at 8% 0%,#edeaff 0,transparent 50%),linear-gradient(170deg,#f8fbff 20%,#e9f5ff 70%,#f7eefa);box-shadow:0 16px 45px #273f3212,inset 0 0 0 1px #ffffffb0}
.tp-stage.tall{aspect-ratio:16/13} /* two-story and villa art is taller than wide */
/* plush yard backdrop (yard.webp): fills the stage, the house stands where its stepping stones end */
.tp-yard{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:0}
.tp-top{margin:10px 0 0;font-size:13px;font-weight:600;color:#6d5a2c;display:inline-block;padding:5px 12px;border-radius:20px;background:#fff6dc;border:1px solid #f1e0b0}
.tp-sun{position:absolute;right:9%;top:9%;width:13%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff7d6,#ffd98a 55%,#ffc062);box-shadow:0 0 34px 14px #ffe6a855;opacity:.9}
.tp-hills{position:absolute;left:0;right:0;bottom:30%;width:100%;height:36%}
.tp-hills .h-far{fill:var(--hill-far)}.tp-hills .h-mid{fill:var(--hill-mid)}
.tp-sprigs{position:absolute;left:0;bottom:22%;width:44%;height:40%;background:url('/assets/habitat-sprigs.svg') left bottom/contain no-repeat;opacity:.5}
.tp-ground{position:absolute;left:-8%;right:-8%;bottom:-24%;height:62%;border-radius:50%;background:radial-gradient(ellipse at 50% 22%,#dcf3d6 0,#bfe6c0 45%,#9fd5a8 100%);box-shadow:inset 0 10px 24px #ffffff8c,inset 0 -20px 40px #6fae7d40;z-index:0}
.tp-ground::before{content:"";position:absolute;inset:7% 9% auto;height:70%;border-radius:50%;border:2px dashed #ffffffa0}
.tp-walk{position:absolute;left:calc(var(--x) * 1%);bottom:0;width:13%;height:21%;transform:translateX(-50%);background:radial-gradient(ellipse 34% 11% at 46% 12%,#fff6e3 96%,#0000),radial-gradient(ellipse 38% 12% at 56% 44%,#fff6e3 96%,#0000),radial-gradient(ellipse 44% 13% at 44% 80%,#fff6e3 96%,#0000);filter:drop-shadow(0 2px 0 #e3cfa9);z-index:1}
.tp-item{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--y) * 1%);width:calc(var(--w) * 1%);transform:translateX(-50%);z-index:var(--z,5)}
.tp-door{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--y) * 1%);width:18%;aspect-ratio:3/1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#fff6d6 0,#ffe3a0cc 40%,#ffd98a00 72%);opacity:0;z-index:12;pointer-events:none}
.tp-stage.opened .tp-door{opacity:.85}
.tp-resident{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--y) * 1%);width:calc(var(--w) * 1%);transform:translateX(-50%);z-index:30;transform-origin:50% 100%}
.tp-resident .pg-badge{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--hh),0 12px 20px #29354c33}
.tp-resident::after{content:"";position:absolute;left:14%;right:14%;bottom:-8%;height:10%;border-radius:50%;background:#4e4260;opacity:.14;z-index:-1}
.tp-name{position:absolute;left:50%;bottom:-17%;transform:translateX(-50%);font-size:12px;font-weight:650;background:#fff;border-radius:30px;padding:3px 10px;box-shadow:0 3px 10px #29354c1f;white-space:nowrap}
.tp-bubble{position:absolute;left:4%;top:12%;width:min(38%,300px);margin:0;padding:10px 12px;border:1px solid #e3eaf1;border-radius:0 13px 13px 13px;background:#fff;font-size:11.5px;line-height:1.7;color:#5e6e87;box-shadow:0 6px 18px #26395512;z-index:40}
.tp-bubble b{display:block;font-size:9px;letter-spacing:1.2px;color:var(--fine);margin-bottom:3px}
.tp-note{right:6px;bottom:0}
/* draft art (index.json "drafts"): a quiet sand pill next to rough art, same family as the map's; gone once the art is final */
.draft-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid #ece3d2;border-radius:22px;background:#faf6eeeb;font-size:10.5px;font-weight:600;line-height:1.45;color:#6b5a3f;vertical-align:1px}
.draft-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#d6a653;flex:none}
.tp-drafts{position:absolute;right:16px;top:46px;z-index:40;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:62%;pointer-events:none}
.tp-drafts .draft-tag{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:normal;text-align:left;border-radius:14px}
.tp-tag{position:absolute;left:50%;bottom:-13%;transform:translateX(-50%);font-size:10px;font-weight:650;color:#5e6e87;background:#fff;border-radius:30px;padding:1px 8px;white-space:nowrap;box-shadow:0 2px 6px #29354c1a}

/* stats: his agent-card numbers, bigger */
.tp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.tp-stat{background:#fff;border:1px solid #e3e8e3;border-radius:22px;padding:16px 20px;box-shadow:0 6px 18px #24382d05}
.tp-stat small{display:block;font-size:11px;color:var(--fine)}
.tp-stat b{display:block;font-size:26px;letter-spacing:-.8px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;color:#192741}
.tp-stat>span{font-size:11px;color:var(--fine)}

.tp-section{padding-top:70px}
.tp-section .section-heading{margin-bottom:30px}
.tp-section .section-heading h2{font-size:34px}
/* his dashboard content: charts row + holdings */
.tp-dash{border:1px solid #e0e7f2;border-radius:20px;background:#f8fbff;box-shadow:0 15px 45px #2b487710;padding:18px}
.tp-dash .charts{grid-template-columns:minmax(0,1.55fr) minmax(220px,1fr);gap:14px}
.tp-dash .charts.solo{grid-template-columns:1fr}
.tp-dash .chart-heading>span{font-size:10px}
.tp-chart svg{width:100%;height:auto;display:block}
.tp-dash .chart-summary{margin-top:6px}
.tp-dash .allocation-panel>p{font-size:10px}
.tp-dash .donut-wrap>span strong{font-size:13px}
.tp-dash .donut-wrap>span small{font-size:9px}
.tp-dash .holdings-account summary{cursor:default}
.tp-dash .holdings-account summary:after{content:none}

/* home + lanes: his agent cards, with the art in the portrait well */
.tp-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tp-lane{display:flex;flex-direction:column;border:1px solid #e3e8e3;padding:7px;border-radius:25px;background:#fff;box-shadow:0 6px 18px #24382d04;transition:transform .2s,box-shadow .2s}
.tp-lane:hover{transform:translateY(-4px);box-shadow:0 14px 34px #24382d0b}
/* lane picture: a row of pills ("Draft art" left, level right) above the art, never on top of each other */
.tp-lane-art{position:relative;height:190px;display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:6px;justify-items:center;align-items:end;border-radius:19px;padding:11px 11px 12px;background:radial-gradient(ellipse at 50% 100%,#fff 0,transparent 70%),color-mix(in srgb,var(--hh) 12%,#f4f7f3)}
.tp-lane-art .pg-art{width:auto;height:100%;max-width:74%}
.tp-lane-tags{justify-self:stretch;align-self:start;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 6px;min-height:23px}
.tp-lane-tags .strategy{position:static;margin-left:auto;background:#fffffff0;color:#526450;font-weight:600;white-space:nowrap}
.tp-lane-tags .draft-tag{white-space:nowrap}
.tp-faint{opacity:.35;width:100%;height:100%;display:grid;place-items:end center}
.tp-lane-copy{display:flex;flex:1;flex-direction:column;padding:16px 12px 8px}
.tp-lane h3{font-size:18px;margin:0 0 2px;letter-spacing:-.4px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.tp-lane h3 span{font-size:11px;font-weight:600;color:var(--fine);letter-spacing:0}
.tp-lane p{font-size:12px;color:#6a7888;margin:3px 0 0;line-height:1.65}
.tp-lane .how{font-size:11px;color:var(--fine);margin-top:auto;padding-top:10px;border-top:1px solid #f1f3f8}
.pg-pips{display:flex;gap:5px;margin:8px 0 6px;padding:0;list-style:none}
.pg-pips li{width:13px;height:13px;border-radius:50%;background:#eef1f4;box-shadow:inset 0 1px 2px #0000000f}
.pg-pips li.on{background:var(--hh);box-shadow:inset 0 -2px 3px #0002,inset 0 2px 2px #fff6}
.pg-bar{height:6px;border-radius:6px;background:#eef1f4;overflow:hidden;margin:2px 0 4px}
.pg-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--hh) 60%,#fff),var(--hh))}
.tp-items{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0;padding:0;list-style:none}
.tp-items li{font-size:10px;font-weight:600;border-radius:30px;padding:2px 9px;background:#f4f6ef;color:#526450}

/* decisions, life, diary, wishes, keepsakes */
.tp-desk{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.tp-col{display:grid;gap:18px;min-width:0}
.tp-desk .trade-log{margin:0}
.trade-row strong small{font-size:10px;font-weight:500;color:var(--fine);margin-left:6px}
.trade-action.hold{color:#5a6b86;background:#eef2f8}
.tp-risk{color:#6f6457!important}.tp-risk b{font-weight:600;color:#6d6153}
.tp-fine{font-size:10px;color:var(--fine);margin:10px 0 0;padding-top:10px;border-top:1px solid #eef2f8}
.tp-diary{border:1px solid #e1e8f2!important;border-radius:13px}
.tp-diary .message-meta b{color:#435577;font-size:11px;font-weight:650}
.tp-diary .chat-message.owl .chat-bubble{background:#fff}
.tp-life{list-style:none;margin:6px 0 0;padding:0 0 0 4px}
.tp-life li{position:relative;padding:0 0 12px 24px;font-size:12.5px;line-height:1.6;color:#4e6087}
.tp-life li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--dot,#d5deea)}
.tp-life li::after{content:"";position:absolute;left:5px;top:19px;bottom:-1px;width:1.5px;background:#e8edf3}
.tp-life li:last-child::after{display:none}
.tp-life li.move{--dot:var(--hh)}.tp-life li.award{--dot:#f0a53a}.tp-life li.cover{--dot:#b8a68a}.tp-life li.cloud{--dot:#9cc9f0}
.tp-life time{font-weight:650;color:#34496c;margin-right:6px;font-variant-numeric:tabular-nums}
.pg .tp-more{border:0;background:none;color:var(--green);font-weight:650;font-size:12px;padding:4px 0;cursor:pointer}
.tp-wishes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.tp-wishes li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:11px;background:#f7faff;border:1px solid #e9eef6;font-size:12px;line-height:1.5;color:#354865}
.tp-wishes li b{display:block;font-weight:650}
.tp-wishes li span{font-size:11px;color:var(--fine)}
.tp-wishes li.ready{background:#fff7e8;border-color:#f3dfb6}
.tp-wishes li.ready span{color:#8a5a1f;font-weight:600}
.tp-wishes li.granted{background:#edf9f3;border-color:#d4ecdf}
.tp-wish-ico{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px #e3eaf3;font-size:12px;color:#8a5a1f}
.tp-shelf{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;padding:14px 12px 10px;list-style:none;border-radius:12px;background:linear-gradient(180deg,#fbfaf6 0,#fbfaf6 76%,#e6c79f 76%,#d3ad7f 100%)}
.tp-shelf li{width:84px;text-align:center;font-size:10.5px;line-height:1.35;color:#5e6e87}
.tp-keep{width:54px;height:54px;margin:0 auto 5px;border-radius:50%;display:grid;place-items:center;background:var(--kc,#f28172);box-shadow:inset 0 -5px 8px #0002,inset 0 3px 4px #fff5,0 4px 8px #4e42602a;outline:1.5px dashed #ffffffb8;outline-offset:-6px}
.tp-keep svg{width:28px;height:28px;color:#fff}
.tp-ribbons{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.tp-ribbons li{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:#354865}
.tp-ribbons svg{width:24px;height:32px;flex:none;color:var(--hh)}
.tp-ribbons img{flex:none;margin:1px -2px 0}
.tp-ribbons b{display:block}
.tp-ribbons span{font-size:11px;color:var(--fine)}

/* neighbors: his closing landscape */
.tp-closing{margin-top:80px}
.closing-cast>a{display:block;height:61px;width:61px;margin-left:-12px;border-radius:50%;background:#fcfcf5;border:3px solid #f8faf2;overflow:hidden;box-shadow:0 3px 9px #253f2410;transition:transform .15s}
.closing-cast>a:hover{transform:translateY(-3px)}
.closing-cast>a .pg-badge{width:100%;height:100%;box-shadow:none}
.tp-cast-note{margin:-14px 0 18px}
.tp-neighbors{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.tp-neighbor{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;padding:8px 16px;border-radius:16px;background:#ffffffc8;border:1px solid #dce4df;text-decoration:none;text-align:left;transition:background .15s}
.tp-neighbor:hover{background:#fff}
.tp-neighbor b{display:block;font-size:13px;color:#26385a}
.tp-neighbor span{font-size:11px;color:#6a7888}
.tp-neighbor>span>span{display:block}
.tp-neighbor .draft-tag{display:inline-flex;margin-top:4px;font-size:10px;color:#6b5a3f}
.tp-neighbor .pg-badge{width:42px;flex:none}
.tp-missing{padding:40px 0 0}
.tp-missing .tp-neighbor{flex-direction:row;align-items:center;gap:12px}

/* =================== PAPER PAGE =================== */
body.pg-paper{background:linear-gradient(180deg,#f8fbff 0,#fff 420px)}
.pp-sheet{position:relative;margin:24px auto 0;background:#fffdf8;border:1px solid #e0e7da;border-radius:25px;box-shadow:0 16px 45px #273f3210;padding:30px 38px 34px;color:#1f2530}
.pp-sheet::before{content:"";position:absolute;left:0;bottom:0;width:38%;height:180px;background:url('/assets/habitat-sprigs.svg') left bottom/contain no-repeat;opacity:.28;pointer-events:none;border-radius:0 0 0 25px}
.pp-mast{text-align:center;border-bottom:3px double #34405a;padding-bottom:12px}
.pp-mast-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-title{font:700 clamp(40px,6.2vw,72px)/1 var(--serif);letter-spacing:-1.5px;margin:6px 0 6px;color:#192741;max-width:none}
.pp-tagline{font:italic 15px/1.4 var(--serif);color:#5b6478;margin:0 0 12px}
.pp-ornament{display:block;height:44px;width:auto;max-width:100%;margin:-2px auto 10px}
.pp-flip{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid #dce4df;background:#fff;font:600 22px/1 var(--serif);color:#34405a;cursor:pointer;flex:none;text-decoration:none}
.pp-flip:hover{color:var(--green)}
.pp-flip[aria-disabled=true]{opacity:.3;pointer-events:none}
.pp-dateline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #34405a;padding-top:7px;font:600 11px/1.4 var(--serif);letter-spacing:.9px;text-transform:uppercase;color:#4b5468}
.pp-demo{color:#8a5a1f}
.pp-editions{display:inline-flex;justify-content:center;gap:3px;flex-wrap:wrap;margin:14px 0 0;padding:4px;list-style:none;border:1px solid #e0e7e1;border-radius:12px;background:#fdfefd}
.pp-editions a{display:block;font:600 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;padding:7px 12px;border-radius:8px;text-decoration:none;color:#7c8ba4}
.pp-editions a:hover{color:var(--green)}
.pp-editions a[aria-current=page]{background:#e0eee5;color:#23715b}
.pp-front{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:30px;margin-top:24px}
.pp-lead h2{font:700 clamp(30px,3.6vw,44px)/1.1 var(--serif);letter-spacing:-.8px;margin:4px 0 10px;color:#192741}
.pp-kicker{font:700 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--green);margin:0}
.pp-lede{font:17px/1.6 var(--serif);color:#3b4458;margin:0 0 16px}
.pp-fig{margin:0}
.pp-fig .pp-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#e9f5ff;box-shadow:0 0 0 1px #dce4df}
.pp-fig svg{width:100%;height:100%;display:block}
.pp-leadimg{display:block;width:100%;height:100%;object-fit:cover}
.pp-inset{position:absolute;right:2.5%;bottom:3%;width:16%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fffdf8;box-shadow:0 0 0 3px var(--ring),0 4px 12px #3a241033}
.pp-inset img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pp-frame .draft-tag{position:absolute;left:10px;top:10px;z-index:1}
.pp-fig figcaption{font:italic 13px/1.5 var(--serif);color:#5b6478;margin-top:8px}
.pp-side{border-left:1px solid #e3e6dc;padding-left:26px;display:grid;gap:22px;align-content:start}
.pp-h3{font:700 11px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 10px;color:#34405a;border-bottom:1.5px solid #34405a;padding-bottom:7px}
/* a spot illustration standing on the heading's rule; the three column heads share one height so their rules line up */
.pp-h3-spot,.pp-cols>section>.pp-h3{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pp-cols>section>.pp-h3{min-height:50px}
.pp-spot{flex:none;width:48px;height:48px;margin:0 -2px -7px 0}
.pp-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.pp-table caption{caption-side:bottom;text-align:left;font:italic 11.5px/1.4 var(--serif);color:#6c7488;padding-top:7px}
.pp-table th{font:600 10px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#7c8ba4;text-align:right;padding:4px 4px 7px;border-bottom:1px solid #e3e6dc}
.pp-table th:first-child,.pp-table td:first-child{text-align:left}
.pp-table td{padding:8px 4px;border-bottom:1px dotted #dfe3dc;text-align:right;white-space:nowrap;color:#34405a}
.pp-table td:first-child{white-space:normal} /* families of three ("Olive & Oscar & Otto") wrap instead of pushing the numbers out */
.pp-table td:first-child a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:650}
.pp-table td:first-child .pg-badge{flex:none}
.pp-table td:first-child a:hover{color:var(--green)}
.pp-draft-note{margin:6px 0 0;font-style:normal}
.pp-table .pg-badge{width:26px;box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--hh)}
.pp-weather{display:flex;gap:12px;align-items:center;font:15px/1.4 var(--serif);color:#34405a}
.pp-weather svg{width:44px;height:44px;flex:none}
.pp-weather small{display:block;font-size:12.5px;color:#6c7488}
.pp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px;padding-top:20px;border-top:1.5px solid #34405a}
.pp-cols>section+section{border-left:1px solid #e3e6dc;padding-left:28px}
.pp-briefs{list-style:none;margin:0;padding:0;display:grid;gap:11px;font:14.5px/1.55 var(--serif);color:#2c3445}
.pp-briefs time{font:650 11px/1 Inter,ui-sans-serif,system-ui,sans-serif;color:#7c8ba4;margin-right:6px;font-variant-numeric:tabular-nums}
.pp-briefs .src{display:block;font:700 9.5px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--green)}
.pp-quotes blockquote{margin:0 0 14px;font:italic 16px/1.5 Georgia,serif;color:#437764}
.pp-quotes blockquote footer{display:block;padding:0;border:0;background:none;font:600 11.5px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;font-style:normal;color:#7c8ba4;margin-top:3px}
/* the notice board is a real board: wood frame, pinned notes */
.pp-boardwrap{padding:14px;border-radius:14px;background:repeating-linear-gradient(177deg,#0000 0 6px,#9a5f2e12 6px 7px,#0000 7px 13px),linear-gradient(180deg,#e7b981,#cf955a);box-shadow:inset 0 0 0 6px #b67a46,inset 0 0 0 8px #9a6536,0 6px 16px #5a3a1a22}
.pp-board{list-style:none;margin:0;padding:0;display:grid;gap:9px;font:13.5px/1.5 var(--serif);color:#3b4458}
.pp-board li{position:relative;background:#fffdf6;border-radius:3px;padding:10px 12px 9px;box-shadow:0 3px 6px #5a3a1a2e}
.pp-board li:nth-child(odd){transform:rotate(-.5deg)}.pp-board li:nth-child(even){transform:rotate(.4deg)}
.pp-board li::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb3a6,#e0645a);box-shadow:0 1px 2px #0003}
.pp-board .tp-ribbon{float:right;margin:0 -4px 2px 8px}
.pp-board b{font:700 12px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;color:#26385a}
.pp-rules{margin:8px 0 0;padding-left:20px;font:13.5px/1.55 var(--serif);color:#3b4458}
.pp-rules li{margin-bottom:5px}
.pp-coming{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;padding:16px 18px;background:#f4f6ef;border:1px solid #e5eadd;border-radius:14px;font:14.5px/1.55 var(--serif);color:#34405a}
.pp-coming b{font:700 10px/1.6 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;display:block;color:#526450}
.pp-coming>div{flex:1 1 220px}
.pp-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.pp-signoff{display:flex;align-items:center;justify-content:center;gap:10px 26px;margin-top:22px}
.pp-signoff .pp-links{margin:0;flex-direction:column;align-items:stretch}
.pp-stand{display:block;width:180px;height:auto;flex:none}
.pp-empty{text-align:center;padding:26px 0 8px}.pp-empty .pp-stand{width:160px;margin:0 auto 6px}.pp-empty .pg-empty{font:italic 17px/1.5 var(--serif)}

/* =================== responsive =================== */
@media(max-width:1100px){.tp-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}.tp-dash .charts{grid-template-columns:1fr}}
@media(max-width:800px){
  .tp-hero .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .tp-hero .hero-copy{padding:30px 0 6px;text-align:center}
  .tp-hero .hero-features{justify-content:center}
  .tp-stagewrap{padding:18px 0 36px}
  .tp-drafts{top:30px;right:12px;max-width:74%}
  .tp-bubble{position:relative;left:auto;top:auto;width:auto;margin:12px 0 0;font-size:13px}
  .tp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tp-desk{grid-template-columns:1fr}
  .tp-section{padding-top:50px}
  .tp-section .section-heading h2{font-size:28px}
  .pp-sheet{padding:20px 18px 24px}
  .pp-front{grid-template-columns:1fr}
  .pp-side{border-left:0;padding-left:0}
  .pp-cols{grid-template-columns:1fr}
  .pp-cols>section+section{border-left:0;padding-left:0;border-top:1px solid #e3e6dc;padding-top:18px}
  .pp-ornament{height:28px;margin-bottom:8px}
  .pp-spot{width:40px;height:40px}
  .pp-cols>section>.pp-h3{min-height:0}
  .pp-signoff{flex-direction:column}.pp-stand{width:130px}
  .pp-inset{box-shadow:0 0 0 2px var(--ring),0 2px 6px #3a241033}
}
@media(max-width:560px){
  .tp-stage{aspect-ratio:1/1;border-radius:24px}
  .tp-stage.tall{aspect-ratio:1/1.15}
  .tp-item,.tp-resident{left:calc(var(--mx) * 1%);bottom:calc(var(--my) * 1%);width:calc(var(--mw) * 1%)}
  .tp-door{left:calc(var(--mx) * 1%);bottom:calc(var(--my) * 1%)}
  .tp-walk{left:calc(var(--mx) * 1%)}
  .tp-hills{bottom:34%;height:30%}
  .tp-stat{padding:12px 14px;border-radius:18px}.tp-stat b{font-size:21px}
  .tp-lanes{grid-template-columns:1fr 1fr;gap:10px}.tp-lane-art{height:150px;padding:8px 7px 8px;row-gap:5px}.tp-lane-tags{gap:4px;min-height:21px}.tp-lane-tags .strategy{font-size:10px;padding:3px 8px}.tp-lane-tags .draft-tag{font-size:10px;padding:2px 7px}.tp-lane-art .pg-art{max-width:80%}.tp-lane-copy{padding:12px 6px 6px}.tp-lane h3{font-size:15px}
  .tp-dash{padding:10px;border-radius:16px}
  .tp-hero h1{font-size:40px}
  .tp-note{display:none}
  .pp-dateline{justify-content:center;text-align:center}
  .pp-title{font-size:38px;letter-spacing:-1px}.pp-tagline{font-size:13px}
  .pp-flip{width:34px;height:34px;font-size:19px}
  .pp-editions{display:flex;justify-content:flex-start;position:relative;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}.pp-editions::-webkit-scrollbar{display:none}.pp-editions a{white-space:nowrap}
  .pp-table{font-size:12px}.pp-table th{font-size:9px}
}
@media(max-width:360px){.tp-lanes{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pg *{transition:none!important}}

/* ---- contrast floor: his small grey labels, one notch darker on town pages so small text meets WCAG AA (4.5:1) ---- */
.pg .preview-notice p,.pg .section-heading .eyebrow,.pg .chart-heading>span,.pg .allocation-panel>p,.pg .chart-summary,
.pg .holding-person small,.pg .holding-total small,.pg .account-balances,.pg .holdings-account thead th,.pg .holdings-panel .holdings-disclosure,
.pg .trade-row time,.pg .trade-row p,.pg .log-heading>span,.pg .chat-demo,.pg .chat-footer,.pg .message-meta time,.pg footer p,.pg .stats small{color:var(--fine)}
.pg .holdings-panel>p{color:var(--fine)}.pg .closing .eyebrow{color:#566f79}.pg .closing p:not(.eyebrow){color:#56697b}
.pg .account-balances .negative{color:#a44f49}.pg .account-balances .positive{color:#0a7a61}.pg .ticker-button{color:#137a63}
.pg .trade-action.buy{color:#0a7a61}.pg .trade-action.sell{color:#a44f49}
/* Phones: his trade log stacks name, action and round on three lines (round2.css makes .trade-action a block under
   560px). On the trader page they share one line: name, the action pill, and the round pushed to the right. */
@media(max-width:560px){.tp-desk .trade-row strong{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px}.tp-desk .trade-row .trade-action{display:inline-block;margin:0}.tp-desk .trade-row strong small{margin-left:auto}}
/* The neighbors' portraits keep their round shape when there are more of them than fit on one line. */
.closing-cast{flex-wrap:wrap;row-gap:8px}.closing-cast>a{flex:none}
@media(max-width:560px){.closing-cast>a{width:46px;height:46px;margin-left:-10px}}