/* Project ideas page (owner, 27 Oct 2026). Built on the Resources page styles in hub.css. */
.pi-page{--pi-dark:#173f32;--pi-lime:#d0df83}

/* cards: the hook sits in the small card on the cover */
.rz-cv-art .pi-break{width:300px;max-width:none}
.pi-break p{margin:0;font:500 22px/1.25 Neue,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.pi-card{cursor:pointer}

/* level picker */
.pi-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-14px auto 40px}
.pi-levels button{display:grid;gap:4px;min-width:150px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.pi-levels button:hover{border-color:#173f3255}
.pi-levels b{font:500 16px/1.1 Neue,sans-serif}
.pi-levels span{font:13px/1.2 Neue,sans-serif;color:var(--muted)}
.pi-levels button[aria-pressed=true]{background:var(--pi-dark);border-color:var(--pi-dark);color:#fffef3}
.pi-levels button[aria-pressed=true] span{color:#c9d7c0}
.pi-group[hidden]{display:none}

/* submit band */
.pi-submit-band{border-top:0}
.pi-submit-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:end;padding:44px 48px;border-radius:24px;background:var(--pi-dark);color:#eef3e6}
.pi-submit-card .hub-eyebrow{color:var(--pi-lime)}
.pi-submit-card h2{font:500 clamp(34px,4vw,52px)/1 Neue,sans-serif;letter-spacing:-.04em;color:#fffef3}
.pi-submit-card h2 em{color:var(--pi-lime)}
.pi-submit-card p:not(.hub-eyebrow){margin-top:14px;max-width:58ch;font:17px/1.55 Neue,sans-serif;color:#d9e2d6}
.pi-submit-act .hub-primary{width:100%;justify-content:center;background:var(--pi-lime);color:var(--pi-dark)}
.pi-submit-act .hub-primary:hover{background:#e2ee9c}
.pi-submit-act p{margin-top:10px!important;font-size:14px!important;color:#b9c8b3!important}

/* dialogs */
.pi-dialog{width:min(860px,calc(100% - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:20px;background:#fbfbf7;color:var(--ink);box-shadow:0 40px 90px -40px #0d1712;overflow:auto;overscroll-behavior:contain}
.pi-dialog::backdrop{background:#0f2018b8;backdrop-filter:blur(4px)}
.pi-close{position:sticky;top:12px;z-index:4;display:grid;place-items:center;width:40px;height:40px;margin:12px 12px -52px auto;border:1px solid var(--line);border-radius:50%;background:#fbfbf7;font:300 26px/1 Neue,sans-serif;color:var(--ink);cursor:pointer}
.pi-close:hover{background:#eef2e4}

/* one brief */
.pi-brief>.pi-sec{margin:28px 36px 0}
.pi-bhead{padding:34px 36px 4px}
.pi-bmeta{display:flex;flex-wrap:wrap;gap:6px}
.pi-bmeta span{padding:6px 10px;border-radius:999px;background:#173f320d;font:500 12px/1 Neue,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.pi-bmeta span:first-child{background:var(--pi-lime);color:var(--pi-dark)}
.pi-bhead h2{margin-top:14px;padding-right:44px;font:500 clamp(30px,4vw,44px)/1.02 Neue,sans-serif;letter-spacing:-.04em;color:var(--ink)}
.pi-blead{margin-top:10px;font:18px/1.45 Neue,sans-serif;color:var(--muted)}
.pi-brief h3{font:500 20px/1.2 Neue,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.pi-brief .pi-sec>p{margin-top:10px;font:16px/1.6 Neue,sans-serif;color:var(--text)}
.pi-test{padding:12px 14px;border-radius:12px;background:#173f320a}
.pi-test b{font-weight:500;color:var(--ink)}
.pi-num{list-style:none;margin:12px 0 0;padding:0;counter-reset:pi}
.pi-num li{counter-increment:pi;display:grid;grid-template-columns:34px 1fr;padding:10px 0;border-bottom:1px solid var(--line);font:16px/1.5 Neue,sans-serif;color:var(--text)}
.pi-num li::before{content:counter(pi);font:300 24px/1 Neue,sans-serif;color:#2f6b53}
.pi-num li:last-child{border-bottom:0}
.pi-brief>.pi-sec.pi-breaks{padding:24px 26px 14px;border-radius:18px;background:var(--pi-dark);color:#eef3e6}
.pi-k,.pi-brief .pi-sec.pi-breaks>.pi-k{margin:0;font:500 12px/1.3 Neue,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pi-lime)}
.pi-brief .pi-sec.pi-breaks .pi-hook{margin-top:12px;font:400 italic 28px/1.15 Editorial,serif;color:#fffef3}
.pi-brief .pi-sec.pi-breaks .pi-breaks-lead{margin-top:10px;font-size:15px;color:#c9d7c0}
.pi-breaks .pi-num li{border-color:#ffffff1f;color:#eef3e6}
.pi-breaks .pi-num li::before{color:var(--pi-lime)}
.pi-steps{list-style:none;margin:14px 0 0;padding:0;counter-reset:st}
.pi-steps li{counter-increment:st;position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding-bottom:14px;font:16px/1.5 Neue,sans-serif;color:var(--text)}
.pi-steps li::before{content:counter(st);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pi-dark);color:#fffef3;font:500 14px/1 Neue,sans-serif}
.pi-steps li::after{content:'';position:absolute;left:15px;top:34px;bottom:0;width:2px;background:var(--line)}
.pi-steps li:last-child::after{display:none}
.pi-steps li{padding-top:4px}
.pi-done{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pi-done li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:16px/1.45 Neue,sans-serif;color:var(--ink)}
.pi-done svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--pi-lime);color:var(--pi-dark)}
.pi-two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pi-dots{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pi-dots li{position:relative;padding-left:16px;font:15.5px/1.45 Neue,sans-serif;color:var(--text)}
.pi-dots li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#2f6b53}
.pi-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pi-chips li{padding:6px 11px;border-radius:999px;background:#dfe8cf;font:500 13px/1.2 Neue,sans-serif;color:var(--ink)}
.pi-bfoot{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:32px;padding:16px 36px;border-top:1px solid var(--line);background:#fbfbf7f2;backdrop-filter:blur(8px)}
.pi-bfoot .hub-primary{min-height:48px;padding:12px 20px}
.pi-bfoot .hub-primary .ic{width:17px;height:17px}

/* submit form */
.pi-form[hidden],.pi-done-state[hidden],.pi-brief[hidden]{display:none!important}
.pi-form,.pi-done-state{padding:32px 34px 30px}
.pi-form h2,.pi-done-state h2{margin:4px 0 18px;font:500 32px/1.05 Neue,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.pi-form-lead{margin:-8px 0 6px;font:15px/1.5 Neue,sans-serif;color:var(--muted)}
.pi-form label{display:block;margin:14px 0 6px;font:500 14px/1.3 Neue,sans-serif;color:var(--ink)}
.pi-form label small{font-weight:400;color:var(--muted)}
.pi-form :is(input:not([type=checkbox]),select,textarea){width:100%;padding:12px 14px;border:1px solid #173f3240;border-radius:10px;background:#fff;font:16px/1.4 Neue,sans-serif;color:var(--ink)}
.pi-form :is(input,select,textarea):focus{outline:2px solid #2f6b53;outline-offset:1px}
.pi-form [aria-invalid=true]{border-color:#b42318}
.pi-form label.pi-check{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-weight:400}
.pi-check input{margin-top:3px;width:18px;height:18px;accent-color:#173f32}
.pi-error{min-height:20px;margin-top:10px;font:14px/1.4 Neue,sans-serif;color:#b42318}
.pi-form .hub-primary{width:100%;justify-content:center;border:0;cursor:pointer}
.pi-note{margin-top:10px;font:13px/1.4 Neue,sans-serif;color:var(--muted)}
.pi-done-state p{font:16px/1.55 Neue,sans-serif;color:var(--text)}
.pi-done-state .hub-link{margin-top:16px;background:none;border-width:0 0 1px;cursor:pointer}

@media (max-width:899px){
 .pi-submit-card{grid-template-columns:1fr;gap:24px;padding:30px 24px}
 .pi-levels{display:grid;grid-template-columns:1fr 1fr;margin:-10px 0 28px}
 .pi-levels button{min-width:0}
}
@media (max-width:640px){
 .pi-dialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px);border-radius:16px}
 .pi-bhead{padding:28px 20px 4px}
 .pi-brief>.pi-sec{margin:24px 20px 0}
 .pi-brief>.pi-sec.pi-breaks{padding:20px 18px 10px}
 .pi-two{grid-template-columns:1fr}
 .pi-bfoot{padding:14px 20px}
 .pi-bfoot .hub-primary{width:100%;justify-content:center}
 .pi-form,.pi-done-state{padding:28px 20px 24px}
}

/* Hero (owner, 1 Nov 2026, picked from three samples made from his references): one lime code gadget on a grassy
   hill under a clear sky, a thin frame like the reference, the title centred on the sky (owner, same day: no pill,
   no unlock note and no idea cards in the hero).
   The picture follows the text and its empty sky sits behind the text, so the gadget always lands just under the
   button, whatever the screen height (owner: on a short laptop the gadget ran into the text, on phones it sat far below
   an empty sky). Picture: assets/project-ideas/hero/hill.webp (ChatGPT). */
.ph-hero{--hh:var(--header-height,80px);position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;min-height:110vh;min-height:110svh;margin-top:calc(-1 * var(--hh));background:linear-gradient(#3f84d4,#5797de 50%,#6aa5e4);color:#fff;text-align:center}
/* 110% of the screen tall (owner, 1 Nov 2026); divided by the 85% zoom on desktop so it still shows as 110% */
@media (min-width:900px){body.hub-v2 main>.ph-hero{zoom:.85;--hh:calc(var(--header-height,80px) / .85);min-height:calc(110vh / .85);min-height:calc(110svh / .85)}}
.ph-copy{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:calc(var(--hh) + 52px) 24px 0}
/* The picture box fills the rest of the hero and reaches 16.9cqw up behind the text (the empty sky). The picture sits
   on the box's bottom and is scaled so the gadget's top (44% down the picture) lands 24.8cqw below the box's top, which
   is just under the button, on any screen; it never gets smaller than the full width, and on tall phone screens it
   stops at 225% of the width so the gadget does not fill the screen. */
.ph-art{position:relative;z-index:-1;flex:1 0 auto;margin-top:-16.9cqw;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18cqw);mask-image:linear-gradient(transparent,#000 18cqw)}
.ph-art img{position:absolute;left:50%;bottom:0;width:auto;height:max(56.27cqw,min(calc((100% - 24.8cqw) / .56),225cqw));max-width:none;aspect-ratio:1672/941;transform:translateX(-50%)}
.ph-frame{position:absolute;inset:0;z-index:1;pointer-events:none}
.ph-frame i{position:absolute;top:0;bottom:0;width:1px;background:#ffffff40}
.ph-frame i:nth-child(1){left:12%}.ph-frame i:nth-child(2){right:12%}
.ph-frame b{position:absolute;left:0;right:0;top:calc(var(--hh) + 18px);height:1px;background:#ffffff40}
.ph-frame span{position:absolute;left:50%;top:14%;width:150%;aspect-ratio:1;border-radius:50%;border:1px solid #ffffff38;transform:translateX(-50%)}
.ph-hero h1{margin:0;font:500 clamp(44px,min(5.6vw,10.5vh),92px)/.96 Neue,"Helvetica Neue",sans-serif;letter-spacing:-.05em;color:#fff;text-shadow:0 2px 30px #1c3f7a33}
.ph-hero h1 em{display:block;font-family:Editorial,serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
.ph-lead{max-width:50ch;margin:20px auto 0;font:400 clamp(16.5px,1.4vw,19.5px)/1.45 Neue,sans-serif;color:#fff;opacity:.94}
.ph-actions{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.ph-btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:10px;background:#fffefa;color:#10281d;font:500 15.5px/1 Neue,sans-serif;text-decoration:none;box-shadow:0 18px 36px -18px #0f201880}
.ph-btn:hover{background:#fff}
/* short laptop screens: tighter spacing so the gadget clears the button */
@media (min-width:900px) and (max-height:780px){.ph-copy{padding-top:calc(var(--hh) + 26px)}.ph-lead{margin-top:14px}.ph-actions{margin-top:20px}}
/* phones and tablets: the same rule zooms the picture in on the gadget, because the box is tall and narrow */
@media (max-width:899px){
 .ph-copy{padding:calc(var(--hh) + 34px) 18px 0}
 .ph-frame{display:none}
 .ph-hero h1{font-size:clamp(40px,11.4vw,62px)}
 .ph-lead{font-size:16px;margin-top:16px}
 .ph-actions{margin-top:22px}
}