/* Shared Phill materials: semantic IDE colors, crisp controls, layered workspaces. */
:root{--radius:12px;font-family:Inter,'Segoe UI',Arial,sans-serif}
em{font-family:inherit;font-style:normal;font-weight:600;letter-spacing:inherit}
.site-header{background:var(--app-surface-1);height:76px;gap:20px}
.header-actions{gap:12px}.public-nav{gap:25px}.brand-mark{border-radius:10px}
.button{border-radius:9px}.primary:hover{filter:brightness(1.08)}
.workspace{background:var(--app-canvas)}.sidebar{background:var(--app-surface-1)}
.panel,.post-card,.feature-card,.directory-card,.desktop-panel{background:var(--app-panel-bg);box-shadow:inset 0 1px color-mix(in srgb,var(--ink) 3%,transparent)}
.stack-form input,.stack-form select,.stack-form textarea,input[type=search]{background:var(--app-input-bg)}
.hero-city{border-radius:24px;background:radial-gradient(ellipse at 50% 30%,var(--accent-soft),transparent 75%),var(--app-surface-1)}
.hero-copy h1{letter-spacing:-.055em}.hero-copy h1 em{color:var(--accent)}
.auth-story{background:radial-gradient(ellipse at top left,var(--accent-soft),transparent 70%),var(--app-surface-1)}
.appearance-menu{position:relative}.appearance-menu>summary{list-style:none;display:flex;gap:7px;align-items:center;cursor:pointer;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:12px}
.appearance-menu>summary::-webkit-details-marker{display:none}.appearance-menu[open]>summary{background:var(--accent-soft)}
.appearance-popover{position:absolute;right:0;top:calc(100% + 12px);width:360px;max-width:calc(100vw - 28px);padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);z-index:100;max-height:calc(100dvh - 100px);overflow:auto}
.appearance-popover>strong{font-size:19px;letter-spacing:-.4px}.appearance-popover p{font-size:12px;line-height:1.6;margin:8px 0 14px}.appearance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.appearance-grid button{background:var(--surface-alt);border:1px solid var(--line);padding:6px;border-radius:8px;min-height:72px;color:var(--ink);font-size:10px;text-align:left}.appearance-grid button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:0}
.appearance-preview{display:flex;align-items:center;justify-content:space-between;height:34px;padding:5px 8px;margin-bottom:5px;border:1px solid var(--line);border-radius:4px;font-size:17px;font-weight:650}.appearance-preview i{font-size:13px;color:inherit;font-style:normal}
.appearance-portable{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.appearance-portable>label{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:10px}.appearance-portable .button{font-size:11px;min-height:40px;padding:9px}.appearance-import{position:relative;overflow:hidden;cursor:pointer}.appearance-import input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.appearance-import:focus-within{outline:3px solid var(--focus)}
[data-app-motion=reduced],[data-app-motion=reduced] *,[data-app-motion=reduced] *:before,[data-app-motion=reduced] *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
[data-app-transparency=reduced] .site-header,[data-app-transparency=reduced] .appearance-popover{backdrop-filter:none;background:var(--surface)}
:root[data-theme=high-contrast] .panel,:root[data-theme=high-contrast] .button,:root[data-theme=high-contrast] .post-card{border-width:2px}
@media(max-width:1000px){.appearance-menu>summary>span{display:none}.site-header{gap:12px}.header-actions{gap:8px}.appearance-popover{position:fixed;right:14px;top:80px}}
@media(max-width:700px){.site-header{height:68px}.header-actions>.theme-form{display:none}.appearance-menu>summary{padding:8px 12px;font-size:18px}.hero-city{border-radius:18px}.appearance-popover{top:74px}.brand{font-size:23px}}

/* Shared navigation material, exported from the IDE palette. */
.site-header { background: var(--app-material-nav, var(--surface)); backdrop-filter: var(--app-material-blur, none); border-color: var(--app-material-edge, var(--line)); box-shadow: var(--app-material-highlight, none); }
html[data-app-transparency="reduced"] .site-header, html[data-theme="high-contrast"] .site-header { background: var(--surface); backdrop-filter: none; box-shadow: none; }
@media (prefers-reduced-transparency: reduce), (forced-colors: active) { .site-header { background: var(--surface); backdrop-filter: none; } }
.profile-workspace > div { min-width: 0; display: grid; gap: 20px; align-content: start; }
.profile-workspace .panel { margin: 0; }
.profile-companion { display: grid; grid-template-columns: minmax(100px, 42%) 1fr; align-items: center; gap: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.profile-companion__portrait { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 80%, var(--accent-soft), transparent 68%); }
.profile-companion__portrait svg { width: 100%; height: 100%; }
.profile-companion h3 { font-size: 28px; margin: 8px 0; }
.profile-companion small, .profile-friend > span { color: var(--muted); }
.profile-friend { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 16px; border-top: 1px solid var(--line); }
.profile-friend a { display: flex; align-items: center; gap: 12px; }
.profile-relationship { font-size: 14px; color: var(--muted); }
@media(max-width:600px) { .profile-companion { gap: 12px; padding: 16px; } .profile-companion h3 { font-size: 23px; } }

/* Shared reading planes and a content-led companion collection. */
.workspace-heading h1{font-size:clamp(30px,3.5vw,48px);letter-spacing:-.045em;line-height:1.12}.workspace-heading{padding-bottom:24px}
.site-header,.sidebar{box-shadow:inset 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.post-card{border-radius:20px;padding:24px;box-shadow:none}.record-author .avatar{border-radius:50%}.record-content{font-size:16px;line-height:1.65}.post-media{border-radius:16px;max-height:640px;object-fit:contain}
.companion-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 24px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--app-surface-1)}
.companion-tabs a{padding:10px 14px;border-radius:10px;font-size:13px;color:var(--ink)}.companion-tabs a:hover{background:var(--app-surface-2)}
.companion-hero{display:grid;grid-template-columns:minmax(240px,1fr) 1.15fr;gap:40px;align-items:center;padding:32px;border-radius:28px;background:var(--app-panel-bg);border:1px solid var(--line);margin-bottom:44px}
.companion-stage{position:relative;display:grid;place-items:center;min-height:320px;border-radius:24px;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
.companion-mood-art{display:block;width:min(100%,320px);aspect-ratio:1}
.companion-stage-items{display:flex;gap:12px;justify-content:center}.companion-stage-items .companion-art{width:76px;height:76px}
.companion-intro h2{font-size:clamp(30px,3.5vw,46px);letter-spacing:-.04em;margin:12px 0}.companion-intro>p{font-size:16px;line-height:1.7;color:var(--muted)}
.companion-balances{display:flex;gap:28px;margin:24px 0;flex-wrap:wrap}.companion-balances div{display:grid;gap:4px}.companion-balances strong{font-size:27px;letter-spacing:-.04em}.companion-balances span{font-size:12px;color:var(--muted)}
.companion-care-done,.companion-owned{color:var(--accent);font-size:13px}.companion-intro small{display:block;color:var(--muted);font-size:12px;line-height:1.6}.companion-expression{margin-top:18px}.companion-expression summary{cursor:pointer;font-size:13px}.companion-expression .stack-form{margin-top:14px}
.companion-shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}.companion-product{display:flex;flex-direction:column;gap:16px;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--app-panel-bg)}
.companion-art{display:block;aspect-ratio:1;background-repeat:no-repeat;background-position:var(--art-x) var(--art-y)}

.companion-product>.companion-art{width:100%;max-width:190px;align-self:center}.companion-product h3{margin:4px 0 8px;font-size:17px}.companion-product p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.companion-product small{font-size:11px;color:var(--muted)}
.companion-product footer{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto;font-size:12px}.companion-product footer form{margin:0}.companion-product footer .button{font-size:11px;padding:8px 10px}
.companion-paid{padding:20px 24px;border:1px solid var(--line);border-radius:20px;margin-bottom:48px}.companion-paid summary{cursor:pointer;font-weight:600}.companion-paid p,.companion-paid small{font-size:13px;color:var(--muted);line-height:1.7}.companion-bundles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.companion-bundles article{padding:20px;background:var(--app-surface-1);border-radius:16px}.companion-bundles small{display:block;margin-top:8px}
.companion-achievements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 48px}.companion-achievement{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:20px;align-items:flex-start;background:var(--app-panel-bg)}.companion-achievement>.companion-art{width:72px;min-width:72px}.companion-achievement h3{margin:4px 0 8px;font-size:15px}.companion-achievement p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:12px}.companion-achievement small,.companion-achievement strong{display:block;margin-top:7px;font-size:11px}.companion-achievement progress{height:5px;max-width:100%;width:100%;accent-color:var(--accent)}.companion-achievement .button{margin-top:12px;font-size:12px}
.companion-journal{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:30px}.companion-journal p{font-size:14px;line-height:1.75;color:var(--muted)}.companion-journal ul{list-style:none;padding:0}.companion-journal li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:9px 0;font-size:12px}
@media(max-width:1200px){.companion-shop{grid-template-columns:repeat(2,minmax(0,1fr))}.companion-achievements{grid-template-columns:repeat(2,minmax(0,1fr))}.companion-hero{gap:20px;padding:24px}}
@media(max-width:700px){.companion-hero{grid-template-columns:1fr;padding:20px;gap:8px}.companion-stage{min-height:230px}.companion-mood-art{width:230px}.companion-achievements,.companion-journal,.companion-bundles{grid-template-columns:1fr}.companion-shop{gap:10px}.companion-product{padding:12px;border-radius:16px}.companion-product h3{font-size:15px}.companion-product footer{display:grid}.companion-tabs{gap:0}.companion-tabs a{padding:12px;font-size:12px}.companion-balances{gap:20px}.companion-product .button{min-height:44px}}

/* The current p-dot mark shares its vector material with the OS app identity. */
.brand-symbol{display:block;flex-shrink:0;width:36px;height:36px;object-fit:contain}