/* =============================================================================
   youareirreplaceable — prototype styles
   Direction: Option B (Soft Ambient). Warm, immersive, calming. Large-screen.
   ============================================================================= */

:root{
  /* warm neutrals for clean (consent / entry) surfaces */
  --paper:#f4ece0;
  --paper-2:#efe5d6;
  --card:#faf5ec;
  --ink:#33302c;
  --ink-soft:#6f655b;
  --line:#e2d6c4;
  --terra:#c9603f;
  --terra-soft:#dd8a6e;

  /* glass surfaces over ambient backdrops */
  --glass:rgba(255,250,243,.16);
  --glass-strong:rgba(252,247,239,.93);
  --glass-line:rgba(255,255,255,.4);
  --on-ambient:rgba(255,255,255,.9);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow:0 24px 60px rgba(40,28,16,.30);
  --shadow-soft:0 14px 40px rgba(60,40,20,.16);
  --radius:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:#2a2620;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wordmark{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:.005em}
[hidden]{display:none !important}
button{font-family:inherit}

/* small-screen notice ------------------------------------------------------- */
#small-screen{display:none;position:fixed;inset:0;z-index:9999;background:var(--paper);color:var(--ink);
  place-items:center;text-align:center;padding:2rem}
#small-screen .inner{max-width:26rem}
#small-screen .wordmark{font-size:1.5rem;margin-bottom:1rem}
#small-screen p{color:var(--ink-soft);line-height:1.7}
@media (max-width:1023px){
  #small-screen{display:grid}
  #consent,#entry,#calm,.overlay{display:none !important}
}

/* =============================================================================
   AMBIENT BACKDROPS (warm gradient washes — two distinct environments)
   ============================================================================= */
.bg{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.2s var(--ease)}
.bg.show{opacity:1}
#bg-beach{background:
  radial-gradient(120% 85% at 50% -15%, #ffe7c0 0%, rgba(255,231,192,0) 55%),
  linear-gradient(180deg,#f6c993 0%,#eaa980 26%,#cf9384 50%,#9fb0bd 78%,#86a6bc 100%)}
#bg-forest{background:
  radial-gradient(120% 85% at 50% -15%, #fdeeb8 0%, rgba(253,238,184,0) 55%),
  linear-gradient(180deg,#f3d182 0%,#e7b079 26%,#cf9b7e 50%,#a3b585 78%,#8caa72 100%)}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 100% at 50% 28%, rgba(0,0,0,0) 42%, rgba(28,18,10,.34) 100%)}

/* =============================================================================
   SHARED BUTTONS
   ============================================================================= */
.btn-primary{font-size:1rem;font-weight:700;color:#fff;background:var(--terra);border:none;border-radius:999px;
  padding:.95rem 2.4rem;cursor:pointer;transition:transform .18s var(--ease),background .2s,opacity .2s}
.btn-primary:hover{transform:translateY(-1px);background:#b8542f}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ghost{font-family:var(--sans);font-weight:600;font-size:.82rem;color:#fff;background:var(--glass);
  border:1px solid var(--glass-line);border-radius:999px;padding:.55rem 1.15rem;cursor:pointer;backdrop-filter:blur(10px);transition:.2s}
.btn-ghost:hover{background:rgba(255,255,255,.26)}
.btn-quiet{font-family:var(--sans);font-weight:600;font-size:.82rem;color:#6a5f53;background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:.5rem 1.05rem;cursor:pointer;transition:.2s}
.btn-quiet:hover{background:rgba(0,0,0,.08)}

/* =============================================================================
   CLEAN SCREENS (consent + entry) — editorial, NO ambient visuals (PRD §5.1)
   ============================================================================= */
.clean{position:fixed;inset:0;z-index:100;background:
  radial-gradient(120% 80% at 80% -10%, #f9ecd6 0%, rgba(249,236,214,0) 55%),
  radial-gradient(120% 90% at -10% 110%, #ece1cb 0%, rgba(236,225,203,0) 50%),
  var(--paper);overflow-y:auto;color:var(--ink)}
.clean-inner{max-width:44rem;margin:0 auto;padding:7vh 2rem 6rem}
.clean .wordmark{font-size:1.5rem;margin-bottom:2.6rem;color:var(--ink)}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.clean h1{font-family:var(--serif);font-weight:500;font-size:2.8rem;line-height:1.05;letter-spacing:-.015em;margin:.7rem 0 1.6rem}
.clean p{font-size:1.08rem;line-height:1.75;color:var(--ink);margin-bottom:1.1rem;font-weight:400}
.clean p.accent{font-family:var(--serif);font-style:italic;color:var(--terra);font-size:1.22rem;font-weight:500}
.clean p.strong{font-weight:600}
.clean .signoff{font-family:var(--serif);font-style:italic;color:var(--ink-soft);margin-top:.2rem}

/* consent checkboxes */
.consent-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.6rem;margin:1.8rem 0 1.6rem}
.check{display:flex;align-items:flex-start;gap:.8rem;padding:.55rem 0;cursor:pointer;font-size:1rem;color:var(--ink)}
.check input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--terra);cursor:pointer;flex:0 0 auto}
.field-inline{margin-top:.6rem}
.field-inline label{display:block;font-size:.82rem;color:var(--ink-soft);margin-bottom:.3rem}
.field-inline input[type=text]{width:100%;max-width:18rem;font-family:var(--sans);font-size:.98rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}

/* =============================================================================
   CALM SPACE (ambient)
   ============================================================================= */
#calm{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column}
.topbar{height:70px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2.4rem;z-index:20}
.topbar .wordmark{font-size:1.35rem;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.3)}

.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:1rem 2rem 0;overflow-y:auto}
.hero{max-width:42rem}
.hero .eyebrow{color:var(--on-ambient);text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:2.7rem;line-height:1.12;color:#fff;margin:.8rem 0 .7rem;
  text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero p{font-size:1rem;line-height:1.6;color:var(--on-ambient);text-shadow:0 1px 12px rgba(0,0,0,.3);max-width:36rem;margin:0 auto}

/* stones — glowing orbs */
.stones{display:flex;gap:1.4rem;margin:2.6rem 0 1rem;flex-wrap:wrap;justify-content:center;max-width:62rem}
.stone{width:152px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:#fff}
.orb{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.5rem;color:#fff;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3);transition:transform .25s var(--ease),box-shadow .3s}
.stone:hover .orb{transform:translateY(-5px) scale(1.05);box-shadow:0 18px 42px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45)}
.stone .t{font-family:var(--serif);font-size:1.08rem;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.stone .l{font-size:.78rem;color:var(--on-ambient);line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.35);max-width:13rem}
.stone.done .orb{background:radial-gradient(circle at 35% 30%, rgba(255,238,196,.95), rgba(255,216,150,.55) 60%, rgba(214,176,96,.45));
  color:#5a4a1e;border-color:rgba(255,242,206,.9);box-shadow:0 0 30px 7px rgba(255,224,150,.5), 0 10px 30px rgba(0,0,0,.2)}
.stone .check-mark{display:none}
.stone.done .check-mark{display:block;font-size:.7rem;color:#ffe9b8;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* backdrop toggle */
.backdrop{position:absolute;top:5.2rem;right:2.4rem;z-index:20;text-align:right;max-width:18rem}
.backdrop .hint{font-size:.76rem;color:var(--on-ambient);line-height:1.45;text-shadow:0 1px 10px rgba(0,0,0,.4);margin-bottom:.6rem}
.swatches{display:inline-flex;gap:.4rem}
.swatch{font-family:var(--sans);font-weight:700;font-size:.8rem;color:#fff;background:var(--glass);border:1px solid var(--glass-line);
  border-radius:999px;padding:.42rem 1rem;cursor:pointer;backdrop-filter:blur(10px);transition:.2s}
.swatch.active{background:rgba(255,255,255,.92);color:var(--ink)}

/* tray */
.tray{flex:0 0 auto;align-self:center;margin-bottom:1.3rem;display:flex;gap:.2rem;padding:.4rem;z-index:20;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.tray button{font-family:var(--sans);font-weight:700;font-size:.8rem;color:#fff;background:none;border:none;border-radius:999px;
  padding:.55rem 1rem;cursor:pointer;white-space:nowrap;transition:.18s}
.tray button:hover{background:rgba(255,255,255,.18)}

/* =============================================================================
   OVERLAYS
   ============================================================================= */
.overlay{position:fixed;inset:0;z-index:60;display:none}
.overlay.open{display:block}
.dim{position:absolute;inset:0;background:rgba(20,14,8,.5);backdrop-filter:blur(8px);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translate(-50%,calc(-50% + 14px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* clean modal (founder note / production data) — opaque, editorial */
.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(680px,92vw);max-height:88vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:2.6rem 2.8rem;animation:rise .35s var(--ease)}
.modal .x{position:absolute;top:1.3rem;right:1.5rem;border:none;background:none;font-size:1.3rem;color:var(--ink-soft);cursor:pointer}
.modal h1{font-family:var(--serif);font-weight:500;font-size:2.5rem;line-height:1.04;margin:.6rem 0 1.3rem}
.modal h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin-bottom:.4rem}
.modal p{font-size:1.05rem;line-height:1.7;color:var(--ink);margin-bottom:1rem;font-weight:400}
.modal p.accent{font-family:var(--serif);font-style:italic;color:var(--terra);font-size:1.18rem;font-weight:500}
.modal p.strong{font-weight:600}
.modal .signoff{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}

/* frosted glass panel (conversation / tray) — over ambient */
.glass{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--glass-strong);
  border:1px solid var(--glass-line);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);
  backdrop-filter:blur(24px);animation:rise .35s var(--ease)}
.glass .x{position:absolute;top:1.2rem;right:1.4rem;border:none;background:none;font-size:1.2rem;color:var(--ink-soft);cursor:pointer;z-index:2}

/* conversation */
.conv{width:min(640px,92vw);height:min(82vh,740px);display:flex;flex-direction:column;overflow:hidden}
.conv-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.6rem;border-bottom:1px solid rgba(0,0,0,.08)}
.conv-head .hl{display:flex;align-items:center;gap:.85rem}
.conv-head .c-orb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:1.05rem}
.conv-head .t{font-family:var(--serif);font-weight:500;font-size:1.22rem;color:var(--ink)}
.conv-head .l{font-size:.8rem;color:var(--ink-soft)}
.conv-body{flex:1;overflow-y:auto;padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.msg{max-width:82%;padding:.85rem 1.1rem;border-radius:18px;font-size:.97rem;line-height:1.6}
.msg.bot{background:rgba(255,255,255,.7);color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--terra);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.msg.note{align-self:center;background:rgba(0,0,0,.05);color:var(--ink-soft);font-size:.82rem;font-style:italic;max-width:90%;text-align:center}
.msg.close{align-self:stretch;max-width:100%;background:rgba(201,96,63,.1);border:1px solid rgba(201,96,63,.25);color:var(--ink)}
.msg.typing{opacity:.6;letter-spacing:.15em}
.conv-foot input:disabled,.send:disabled,.done-btn:disabled{opacity:.5;cursor:default}
.conv-foot{padding:.9rem 1.6rem;border-top:1px solid rgba(0,0,0,.08);display:flex;gap:.6rem;align-items:center}
.conv-foot input{flex:1;font-family:var(--sans);font-size:.95rem;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.12);
  border-radius:999px;padding:.7rem 1.1rem;color:var(--ink)}
.send{background:var(--terra);color:#fff;border:none;border-radius:999px;padding:.7rem 1.3rem;font-weight:700;cursor:pointer}
.conv-foot .done-btn{background:none;border:1px solid rgba(0,0,0,.15);color:#6a5f53;border-radius:999px;padding:.6rem 1rem;font-weight:600;cursor:pointer;white-space:nowrap}

/* tray panel */
.panel{width:min(560px,92vw);max-height:86vh;overflow-y:auto;padding:2.2rem 2.4rem}
.panel h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;margin-bottom:.5rem;color:var(--ink)}
.panel .exp{font-size:.93rem;color:var(--ink-soft);line-height:1.6;margin-bottom:1.3rem}
.panel p{font-size:.96rem;line-height:1.7;color:var(--ink);margin-bottom:.8rem}
.res{padding:.85rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.res:last-child{border:none}
.res .nm{font-weight:700;color:var(--ink)}
.res .nm a{color:var(--terra);text-decoration:none}
.res .nm a:hover{text-decoration:underline}
.res .nt{font-size:.87rem;color:var(--ink-soft);margin-top:.15rem;line-height:1.5}
.tag{font-size:.68rem;color:#fff;background:var(--terra);border-radius:999px;padding:.18rem .6rem;font-weight:700;margin-left:.5rem;vertical-align:middle}
.tier-btns{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}
.tier-btn{font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--ink);background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:.45rem 1.05rem;cursor:pointer;transition:.2s}
.tier-btn.active{background:var(--terra);color:#fff;border-color:transparent}
.tier-content ul{list-style:none}
.tier-content li{padding:.55rem 0 .55rem 1.3rem;position:relative;color:var(--ink);line-height:1.55;font-size:.95rem}
.tier-content li::before{content:"•";position:absolute;left:.3rem;color:var(--terra)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.82rem;color:var(--ink-soft);margin-bottom:.35rem}
.field select,.field textarea{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:.65rem .85rem}
.field textarea{min-height:110px;resize:vertical}
.form-note{font-size:.83rem;color:var(--ink-soft);margin-top:.6rem;line-height:1.5}

/* =============================================================================
   PRODUCTION CHART (exact proportions; values + half-of-peak reference line)
   ============================================================================= */
.chart-card{background:rgba(255,255,255,.65);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.5rem 1.2rem;margin:1.6rem 0 .5rem}
.modal .chart-card{background:#fff}
.chart-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.1rem;gap:1rem}
.chart-top .ttl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.chart-top .drop{font-family:var(--serif);font-style:italic;color:var(--terra);font-size:1.05rem;white-space:nowrap}
.chart-plot{position:relative;display:flex;align-items:flex-end;gap:.5rem;height:200px}
.refline{position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(201,96,63,.55);pointer-events:none}
.refline span{position:absolute;right:0;top:-1.05rem;font-size:.64rem;color:var(--terra);background:rgba(255,255,255,.7);padding:0 .3rem}
.col{flex:1;max-width:42px;margin:0 auto;background:linear-gradient(180deg,#cfc7ba,#a89e8e);border-radius:5px 5px 0 0;
  height:0;transition:height 1s var(--ease)}
.col.hi{background:linear-gradient(180deg,var(--terra-soft),var(--terra))}
.chart-x{display:flex;gap:.5rem;margin-top:.45rem}
.chart-x .lab{flex:1;text-align:center;line-height:1.2}
.chart-x .yr{font-size:.66rem;color:var(--ink-soft);font-weight:600}
.chart-x .vl{display:block;font-size:.58rem;color:var(--ink-soft);opacity:.85}
.src{font-size:.76rem;color:var(--ink-soft);line-height:1.5;margin-top:1rem}