/* Products: a visual portfolio first, one spacious workbench when opened. */
.studio-v3 { --product-accent:var(--cyan); letter-spacing:0; }
.portfolio-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:6px 0 22px; }
.portfolio-heading h3 { font:600 36px/1.1 Rajdhani,sans-serif; margin:0 0 6px; }
.portfolio-heading p { margin:0; color:var(--quiet); font:15px/1.5 Rajdhani,sans-serif; }
.portfolio-create-control { display:grid; justify-items:end; gap:7px; }
.portfolio-create-control>small { color:var(--quiet); font:12px Rajdhani,sans-serif; }
.studio-v3 .action { font:600 15px Rajdhani,sans-serif; letter-spacing:.3px; text-transform:none; min-height:42px; }
.studio-v3 .text-button { font:500 15px Rajdhani,sans-serif; letter-spacing:0; }
.portfolio-filters { display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.portfolio-filters button { display:flex; gap:10px; align-items:center; padding:10px 16px 12px; min-height:44px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--quiet); font:600 16px Rajdhani,sans-serif; cursor:pointer; }
.portfolio-filters button.active { color:var(--copy); border-bottom-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 6%,transparent); }
.portfolio-filters button>span { display:grid; place-items:center; min-width:21px; height:21px; padding:0 4px; background:var(--surface-alt); color:var(--quiet); font:13px Rajdhani,sans-serif; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.portfolio-card { display:flex; flex-direction:column; border:1px solid var(--border); background:var(--surface); min-width:0; overflow:hidden; position:relative; transition:border-color .2s,transform .2s,box-shadow .2s; animation:product-reveal .35s ease both; }
.portfolio-card:nth-child(2) { animation-delay:50ms; }
.portfolio-card:nth-child(3) { animation-delay:100ms; }
.portfolio-card:hover,.portfolio-card:focus-within { border-color:var(--cyan); box-shadow:0 8px 26px #0002; transform:translateY(-3px); }
.portfolio-card:before { content:""; position:absolute; z-index:1; top:0; right:0; width:25px; height:2px; background:var(--cyan); }
.portfolio-card.attention:before { background:var(--amber); }
.portfolio-card.archived .product-illustration { filter:saturate(.35); }
.portfolio-card-stage { height:190px; display:grid; place-items:center; overflow:hidden; position:relative; background:radial-gradient(ellipse at 50% 100%,#16414955,transparent 65%),#0b1b20; border-bottom:1px solid var(--border); }
.product-illustration { width:210px; height:210px; flex-shrink:0; background:url('/assets/product-dioramas.png') no-repeat; background-size:200% 200%; }
.product-illustration.digital { background-image:url('/assets/digital-products.png'); background-size:300% 100%; }
.portfolio-card-stage .product-illustration { margin-top:20px; mask-image:radial-gradient(ellipse at center,#000 54%,transparent 74%); transition:transform .3s ease; }
.portfolio-card:hover .product-illustration { transform:scale(1.04); }
.product-badge { display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; border:1px solid color-mix(in srgb,var(--amber) 50%,var(--border)); padding:4px 8px; color:var(--amber); background:var(--surface); font:600 12px/1.2 Rajdhani,sans-serif; letter-spacing:.35px; text-transform:uppercase; }
.product-badge i { width:6px; height:6px; flex-shrink:0; background:currentColor; border-radius:50%; }
.product-badge.live { color:var(--good); border-color:color-mix(in srgb,var(--good) 50%,var(--border)); }
.product-badge.muted { color:var(--quiet); border-color:var(--border); }
.portfolio-card-stage>.product-badge { position:absolute; left:14px; top:14px; }
.product-line-id { position:absolute; right:14px; top:20px; font:10px monospace; letter-spacing:1px; color:#789399; }
.portfolio-card-body { display:flex; flex-direction:column; flex:1; padding:18px; }
.portfolio-card h4 { margin:0; }
.portfolio-card h4 button { display:flex; justify-content:space-between; align-items:baseline; width:100%; text-align:left; gap:12px; background:none; border:0; padding:0; color:var(--copy); font:600 26px/1.2 Rajdhani,sans-serif; cursor:pointer; overflow-wrap:anywhere; }
.portfolio-card h4 button>span { font:20px Rajdhani,sans-serif; color:var(--quiet); }
.portfolio-card-kind { display:flex; flex-direction:column; margin:6px 0 17px; color:var(--copy); font:14px/1.5 Rajdhani,sans-serif; }
.portfolio-card-kind>span { color:var(--quiet); font-size:13px; }
.portfolio-card-metrics { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); padding-top:14px; gap:15px; }
.portfolio-card-metrics>div+div { border-left:1px solid var(--border); padding-left:15px; }
.portfolio-card-metrics small,.product-summary-sales small { display:block; color:var(--quiet); font:13px/1.4 Rajdhani,sans-serif; }
.portfolio-card-metrics strong { display:block; margin-top:4px; color:var(--copy); font:600 22px/1.2 Rajdhani,sans-serif; font-variant-numeric:tabular-nums; }
.portfolio-card-progress { display:flex; align-items:center; min-height:91px; }
.portfolio-card-action { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-top:auto; padding:10px 14px; text-align:left; background:var(--surface-alt); border:1px solid var(--border); border-bottom-color:var(--cyan); color:var(--copy); font:600 16px/1.3 Rajdhani,sans-serif; cursor:pointer; transition:background .2s,border-color .2s; }
.portfolio-card-action>span { color:var(--cyan); font-size:21px; line-height:1; }
.portfolio-card.attention .portfolio-card-action { border-bottom-color:var(--amber); }
.portfolio-card.attention .portfolio-card-action>span { color:var(--amber); }
.portfolio-card-action:hover { background:color-mix(in srgb,var(--cyan) 9%,var(--surface)); border-color:var(--cyan); }
.portfolio-spark { margin:0; width:100%; }
.portfolio-spark svg { display:block; width:100%; height:46px; overflow:visible; }
.portfolio-spark line { stroke:var(--border); stroke-width:1; }
.portfolio-spark polyline { stroke:var(--cyan); stroke-width:2; stroke-linejoin:round; }
.portfolio-spark circle { fill:var(--cyan); }
.portfolio-spark figcaption { color:var(--quiet); font:12px/1.5 Rajdhani,sans-serif; margin-top:2px; }
.portfolio-no-history { color:var(--quiet); font:14px/1.5 Rajdhani,sans-serif; }
.portfolio-path { display:flex; width:100%; list-style:none; padding:0; margin:16px 0 7px; }
.portfolio-path li { position:relative; flex:1; color:var(--quiet); }
.portfolio-path li:not(:last-child):after { content:""; position:absolute; top:10px; left:20px; width:calc(100% - 20px); height:1px; background:var(--border); }
.portfolio-path li.done:after { background:var(--cyan); }
.portfolio-path li>span { display:grid; place-items:center; height:21px; width:21px; border:1px solid var(--border); font:600 12px Rajdhani,sans-serif; border-radius:50%; margin-bottom:6px; }
.portfolio-path li>small { font:12px Rajdhani,sans-serif; }
.portfolio-path li.done { color:var(--cyan); }
.portfolio-path li.done>span { border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 15%,var(--surface)); }
.portfolio-path li.current { color:var(--amber); }
.portfolio-path li.current>span { border-color:var(--amber); }
.portfolio-footnote { margin:16px 0; color:var(--quiet); font:13px/1.6 Rajdhani,sans-serif; }
.portfolio-attention { display:flex; align-items:center; gap:16px; border:1px solid color-mix(in srgb,var(--amber) 45%,var(--border)); padding:15px 18px; background:color-mix(in srgb,var(--amber) 5%,var(--surface)); }
.attention-mark { display:grid; place-items:center; width:28px; height:30px; border:1px solid var(--amber); color:var(--amber); font:600 20px Rajdhani,sans-serif; }
.portfolio-attention strong { color:var(--amber); font:600 17px Rajdhani,sans-serif; }
.portfolio-attention p { margin:3px 0 0; color:var(--quiet); font:14px Rajdhani,sans-serif; }
.portfolio-attention>.action { margin-left:auto; flex-shrink:0; }
.portfolio-empty { grid-column:1/-1; text-align:center; border:1px dashed var(--border); padding:45px 20px; background:var(--surface); }
.portfolio-empty>span { font-size:42px; color:var(--cyan); }
.portfolio-empty h4 { font:600 26px Rajdhani,sans-serif; margin:12px 0; }
.portfolio-empty p { color:var(--quiet); font:15px/1.6 Rajdhani,sans-serif; margin:0 0 20px; }
.studio-v3 .studio-create { max-width:720px; border-top:2px solid var(--amber); padding:22px; }
.studio-create>header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.studio-create h4 { font:600 25px Rajdhani,sans-serif; margin:0; }
.studio-v3 .studio-create .field { margin:18px 0; }
.studio-v3 .studio-create p { margin:0 0 20px; }
.product-focus-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 14px; }
.product-focus-toolbar select { max-width:250px; min-height:38px; padding:8px 35px 8px 12px; color:var(--copy); background:var(--surface); border:1px solid var(--border); font:15px Rajdhani,sans-serif; }
.product-identity { display:flex; align-items:center; min-height:132px; border:1px solid var(--border); background:var(--surface); gap:20px; padding-right:26px; }
.product-identity-art { display:grid; place-items:center; width:160px; min-width:160px; height:132px; overflow:hidden; background:#0b1b20; border-right:1px solid var(--border); }
.product-identity-art .product-illustration { width:160px; height:160px; }
.product-identity-copy { flex:1; min-width:0; padding:13px 0; }
.product-identity-topline { display:flex; align-items:center; gap:14px; }
.product-identity-topline>small { font:10px monospace; color:var(--quiet); letter-spacing:1px; }
.product-identity h3 { margin:7px 0 4px; font:600 30px/1.15 Rajdhani,sans-serif; overflow-wrap:anywhere; }
.product-identity p { margin:0; font:14px/1.5 Rajdhani,sans-serif; color:var(--quiet); }
.product-identity-metric { padding-left:24px; border-left:1px solid var(--border); }
.product-identity-metric>small { font:13px Rajdhani,sans-serif; color:var(--quiet); }
.product-identity-metric>strong { display:block; margin-top:3px; color:var(--cyan); font:600 28px Rajdhani,sans-serif; white-space:nowrap; }
.studio-v3 .studio-view-tabs { margin:6px 0 22px; gap:10px; }
.studio-v3 .studio-view-tabs button { font-size:16px; padding:13px 12px; min-height:46px; }
.product-focus-content { min-width:0; }
.product-summary-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,1fr); gap:20px; align-items:start; }
.product-summary-grid>section { min-width:0; background:var(--surface); border:1px solid var(--border); padding:22px 24px; }
.product-summary-grid h4 { margin:0 0 15px; font:600 24px/1.25 Rajdhani,sans-serif; }
.product-summary-grid p { color:var(--quiet); font:14px/1.7 Rajdhani,sans-serif; margin:0 0 20px; }
.product-summary-grid .product-eyebrow { color:var(--amber); font:11px monospace; letter-spacing:.8px; margin-bottom:12px; }
.product-next-panel h4 { font-size:29px; }
.product-next-panel>.action { margin:0 0 10px; }
.product-next-panel .portfolio-path { margin-top:22px; }
.product-next-panel .portfolio-path li>span { width:28px; height:28px; font-size:14px; }
.product-next-panel .portfolio-path li:after { top:14px; left:28px; width:calc(100% - 28px); }
.product-next-panel .portfolio-path li>small { font-size:14px; }
.product-summary-sales { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; margin:15px 0 12px; padding-top:18px; border-top:1px solid var(--border); }
.product-summary-sales strong { display:block; margin-top:4px; color:var(--copy); font:600 24px Rajdhani,sans-serif; }
.product-next-panel>.text-button { margin-top:12px; }
.product-health-score { display:grid; grid-template-columns:1fr auto; gap:9px 16px; padding:14px 0; border-bottom:1px solid var(--border); }
.product-health-score>span { font:15px Rajdhani,sans-serif; color:var(--quiet); }
.product-health-score>strong { font:600 17px Rajdhani,sans-serif; color:var(--copy); }
.product-health-score>div { grid-column:1/-1; height:5px; background:var(--surface-alt); }
.product-health-score i { display:block; height:100%; background:var(--cyan); transition:width .4s ease; }
.product-health-panel>.text-button { margin-top:17px; text-align:left; }
.product-summary-grid section>header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:12px; }
.product-summary-grid section>header h4 { font-size:21px; margin:0; }
.product-summary-grid section>header small { color:var(--quiet); font:11px Rajdhani,sans-serif; }
.product-summary-grid .product-update-panel { border-left:2px solid var(--cyan); }
.product-update-panel>p { margin:0; color:var(--copy); }
.product-blueprint-panel dl { margin:0; }
.product-blueprint-panel dl>div { display:flex; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid var(--border); font:14px/1.5 Rajdhani,sans-serif; }
.product-blueprint-panel dt { color:var(--quiet); }
.product-blueprint-panel dd { text-align:right; margin:0; }
.product-feature-tags { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.product-feature-tags>span { color:var(--cyan); border:1px solid var(--border); padding:4px 9px; font:13px Rajdhani,sans-serif; }
.product-blueprint-panel>p { margin:0; font-size:13px; }
.studio-v3 .blueprint-impact,.studio-v3 .development-outlook { margin-top:0; }
.studio-v3 .studio-blueprint { grid-template-columns:minmax(0,1fr) 290px; gap:28px; }
.studio-v3 .development-desk { grid-template-columns:minmax(0,1fr) 290px; gap:24px; }
.studio-v3 .blueprint-controls fieldset { padding:22px; border:1px solid var(--border); background:var(--surface); }
.studio-v3 .blueprint-features label { background:var(--surface-alt); }
.studio-v3 .blueprint-features label:has(input:checked) { border-color:var(--cyan); }
.studio-v3 .blueprint-types button { min-height:65px; }
.studio-v3 .blueprint-impact .studio-help { font-size:12px; }
.studio-v3 .studio-commercial,.studio-results-ledger { margin-top:20px; padding:18px 0; border-top:1px solid var(--border); }
.studio-v3 .studio-commercial>summary,.studio-results-ledger>summary { cursor:pointer; color:var(--copy); font:600 18px Rajdhani,sans-serif; }
.studio-results-ledger .table-scroll { overflow-x:auto; margin-top:15px; }
.studio-v3 .studio-performance table { min-width:580px; width:100%; border-collapse:collapse; font:15px Rajdhani,sans-serif; }
.studio-v3 .studio-performance th,.studio-v3 .studio-performance td { text-align:right; padding:10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.studio-v3 .studio-performance th:first-child,.studio-v3 .studio-performance td:first-child { text-align:left; }
.studio-v3 .studio-performance th { color:var(--quiet); }
.studio-v3 button:focus-visible,.studio-v3 select:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.studio-v3 button:disabled { cursor:not-allowed; opacity:.5; }
.light .portfolio-card-stage .product-badge { --surface:#10282f; --amber:#ffc34a; --good:#80d8ba; --quiet:#adc4c6; --border:#36535a; }
.light .portfolio-card:hover { box-shadow:0 8px 24px #203b4610; }
.light .product-identity-art { border-color:var(--border); }
.no-motion .studio-v3 * { animation:none!important; transition:none!important; }
@keyframes product-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1550px) { .portfolio-card-stage { height:210px; } .portfolio-card-stage .product-illustration { width:245px; height:245px; } }
@media(max-width:1350px) {
 .portfolio-grid { gap:14px; } .portfolio-card-stage { height:158px; } .portfolio-card-stage .product-illustration { width:185px; height:185px; }
 .portfolio-card-body { padding:15px; } .portfolio-card h4 button { font-size:24px; } .portfolio-card-metrics { gap:10px; } .portfolio-card-metrics>div+div { padding-left:10px; } .portfolio-card-metrics strong { font-size:20px; }
 .product-line-id { display:none; } .portfolio-heading { margin-bottom:16px; }
 .studio-v3 .studio-blueprint,.studio-v3 .development-desk { grid-template-columns:minmax(0,1fr) 260px; gap:20px; }
 .product-summary-grid { grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr); gap:16px; } .product-summary-grid>section { padding:20px; }
}
@media(max-width:1080px) {
 .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio-filters button { padding:10px; font-size:15px; }
 .studio-v3 .studio-blueprint,.studio-v3 .development-desk,.product-summary-grid { grid-template-columns:1fr; }
 .product-identity-metric { display:none; } .studio-v3 .studio-view-tabs { gap:0; }
 .studio-v3 .studio-view-tabs button { font-size:15px; padding:12px 10px; }
}
@media(max-width:680px) {
 .portfolio-heading { align-items:flex-start; gap:10px; } .portfolio-heading h3 { font-size:30px; } .portfolio-heading p { max-width:170px; font-size:14px; }
 .studio-v3 .portfolio-create-control>.action { font-size:14px; min-height:40px; padding:8px 11px; } .portfolio-create-control>small { font-size:11px; }
 .portfolio-filters { display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; } .portfolio-filters button { justify-content:space-between; padding:9px 10px; }
 .portfolio-grid { grid-template-columns:1fr; gap:18px; } .portfolio-card-stage { height:170px; } .portfolio-card-stage .product-illustration { width:200px; height:200px; }
 .portfolio-card-body { padding:18px; } .portfolio-card h4 button { font-size:26px; } .portfolio-card-kind { flex-direction:row; flex-wrap:wrap; gap:0 10px; }
 .portfolio-card-kind>span { border-left:1px solid var(--border); padding-left:10px; }
 .portfolio-card-metrics strong { font-size:23px; } .product-line-id { display:block; }
 .portfolio-attention { flex-wrap:wrap; padding:14px; gap:12px; } .portfolio-attention>.action { width:100%; margin:0; }
 .product-focus-toolbar { gap:10px; } .product-focus-toolbar select { max-width:180px; font-size:14px; } .product-focus-toolbar .text-button { font-size:14px; }
 .product-identity { gap:12px; min-height:110px; padding-right:12px; } .product-identity-art { width:82px; min-width:82px; height:110px; } .product-identity-art .product-illustration { width:100px; height:100px; }
 .product-identity h3 { font-size:25px; } .product-identity p { font-size:13px; } .product-identity-topline>small { display:none; } .product-badge { font-size:11px; }
 .studio-v3 .studio-view-tabs { display:flex; flex-wrap:wrap; gap:0 5px; margin-bottom:18px; } .studio-v3 .studio-view-tabs button { min-height:43px; padding:10px 8px; font-size:15px; }
 .product-summary-grid>section { padding:18px; } .product-next-panel h4 { font-size:27px; }
 .studio-v3 .blueprint-controls fieldset { padding:16px; } .studio-v3 .blueprint-types button { min-height:58px; }
 .studio-v3 .customer-heading { align-items:flex-start; gap:12px; } .studio-v3 .customer-heading h4 { font-size:24px; }
 .product-summary-grid section>header { flex-wrap:wrap; gap:5px 12px; }
 .studio-v3 .product-team-editor>summary small { display:block; margin:5px 0 0; }
}
@media(prefers-reduced-motion:reduce) { .studio-v3 * { animation:none!important; transition:none!important; } }
/* Laptop-height viewports keep the card actions within the first view. */
@media(min-width:1100px) and (max-height:800px) {
 .workspace-scroll:has(.studio-v3) { padding-top:10px; }
 .game .company-view:has(.studio-v3)>.company-header { padding-bottom:9px; margin-bottom:8px; min-height:0; }
 .company-view:has(.studio-v3)>.company-header .context { margin-bottom:3px; }
 .company-view:has(.studio-v3)>.company-header .detail-title { font-size:25px; margin:0; }
 .company-view:has(.studio-v3)>.company-header .ownership-strip { flex-direction:row; align-items:center; gap:12px; padding:7px 12px; }
 .company-view:has(.studio-v3)>.local-tabs { margin-bottom:12px; padding-bottom:8px; }
 .portfolio-heading { margin:0 0 10px; }
 .portfolio-heading>div:first-child { display:flex; align-items:baseline; gap:16px; }
 .portfolio-heading h3 { font-size:30px; margin:0; }
 .portfolio-heading p { font-size:14px; }
 .portfolio-create-control { display:flex; align-items:center; gap:12px; flex-direction:row-reverse; }
 .portfolio-filters { margin-bottom:10px; }
 .portfolio-filters button { min-height:38px; padding-top:7px; padding-bottom:8px; }
 .portfolio-card-stage { height:104px; }
 .portfolio-card-stage .product-illustration { width:140px; height:140px; margin-top:8px; }
 .portfolio-card-body { padding:10px 15px; }
 .portfolio-card-kind { flex-direction:row; flex-wrap:wrap; gap:0 10px; margin-bottom:8px; }
 .portfolio-card-kind>span { border-left:1px solid var(--border); padding-left:10px; }
 .portfolio-card-metrics { padding-top:10px; }
 .portfolio-card-progress { min-height:61px; }
 .portfolio-card-progress .portfolio-spark svg { height:36px; }
 .portfolio-card-progress .portfolio-path { margin:10px 0 5px; }
 .portfolio-card-action { min-height:40px; padding:8px 12px; }
 .product-identity { min-height:110px; }
 .product-identity-art { height:110px; }
}