@import url("tokens.css");

[hidden]{display:none!important}

/* ---------- layout helpers ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--space-4);padding-right:var(--space-4)}
.two-col{display:grid;grid-template-columns:var(--l,1fr) var(--r,1fr);align-items:center}
.grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr)}
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(var(--cols-tab,2),1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  header .container{padding-left:var(--space-3);padding-right:var(--space-3)}
}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface-inverse);border-bottom:1px solid var(--border-inverse)}
.site-header .container{padding-top:var(--space-2);padding-bottom:var(--space-2);min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;flex:0 0 auto}
.brand-mark{display:block;width:46px;height:46px;overflow:hidden;position:relative;flex:0 0 auto}
.brand-mark img{position:absolute;left:-48px;top:-35px;width:141px;max-width:none}
.brand-word{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-name{font-family:var(--font-serif-display);font-size:21px;color:var(--cream-50);white-space:nowrap}
.brand-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500);white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:var(--space-4);flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.navlink{color:var(--text-on-inverse-muted);text-decoration:none;font-size:var(--text-sm);white-space:nowrap;position:relative}
.navlink:hover{color:var(--text-on-inverse-muted)}
.navlink.is-active{color:var(--gold-500)}
.navlink.is-active:hover{color:var(--gold-500)}

/* ---------- eyebrow ---------- */
.eyebrow{display:inline-block}
.eyebrow--muted{color:var(--text-muted)}
.eyebrow--gold{color:var(--gold-500)}
.eyebrow--inverse{color:var(--text-on-inverse-muted)}
.eyebrow--strong{color:var(--text-heading)}

/* ---------- icon (Lucide, mask-based, matches Icon.jsx) ---------- */
.ik-icon{display:inline-block;flex:0 0 auto;background-color:currentColor;
  -webkit-mask-image:var(--i);mask-image:var(--i);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:1;text-decoration:none;
  border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled]{cursor:not-allowed;opacity:.45}
.btn--full{display:flex;width:100%}
.btn--sm{padding:6px 14px;font-size:var(--text-sm);min-height:34px}
.btn--md{padding:10px 20px;font-size:var(--text-body);min-height:44px}
.btn--lg{padding:14px 28px;font-size:var(--text-lead);min-height:54px}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover)}
.btn--primary:active{background:var(--action-primary-bg-active)}
.btn--accent{background:var(--action-accent-bg);color:var(--action-accent-fg)}
.btn--accent:hover{background:var(--action-accent-bg-hover)}
.btn--accent:active{background:var(--action-accent-bg-active)}
.btn--secondary{background:transparent;color:var(--text-heading);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--surface-sunken)}
.btn--ghost{background:transparent;color:var(--action-ghost-fg)}
.btn--ghost:hover{background:var(--action-ghost-bg-hover)}
.btn--inverse{background:var(--cream-a10);color:var(--text-on-inverse);border-color:var(--border-inverse)}
.btn--inverse:hover{background:var(--cream-a20)}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px 8px;border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-caption);line-height:1.4}
.badge--success{background:var(--feedback-success-bg);color:var(--feedback-success-fg);border:1px solid transparent}
.badge--neutral{background:var(--surface-sunken);color:var(--text-muted);border:1px solid var(--border-default)}
.badge--attention{background:var(--gold-a12);color:var(--gold-600);border:1px solid var(--gold-a30)}

/* ---------- card ---------- */
.card{border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-default);
  color:var(--text-strong);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.card--sunken{background:var(--surface-sunken);border-color:var(--border-subtle)}
.card--inverse{background:var(--surface-inverse-alt);border-color:var(--border-inverse);color:var(--text-on-inverse)}
.card--interactive{cursor:pointer}
.card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-heading)}
.field label .req{color:var(--feedback-error-fg)}
.field .hint{font-family:var(--font-sans);font-size:var(--text-caption);color:var(--text-muted)}
.control{width:100%;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.4;color:var(--text-strong);
  background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  padding:11px 14px;height:44px;outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.control:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
textarea.control{height:auto;resize:vertical}
select.control{appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A5C58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.checkbox{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-body);color:var(--text-strong)}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box{width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-card);
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);margin-top:1px}
.checkbox input:checked ~ .box{border-color:transparent;background:var(--surface-inverse)}
.checkbox .box .tick{width:14px;height:14px;background:var(--gold-500);opacity:0;
  -webkit-mask:url("https://unpkg.com/lucide-static@0.408.0/icons/check.svg") no-repeat center/contain;
  mask:url("https://unpkg.com/lucide-static@0.408.0/icons/check.svg") no-repeat center/contain}
.checkbox input:checked ~ .box .tick{opacity:1}

/* ---------- phone frame ---------- */
.phone{width:min(300px,80vw);aspect-ratio:9/19.5;border-radius:40px;background:#000;box-shadow:var(--shadow-lg);overflow:hidden;padding:10px;position:relative}
.phone__screen{width:100%;height:100%;position:relative;border-radius:32px;overflow:hidden;background:var(--surface-page)}
.phone__statusbar{position:absolute;top:0;left:0;right:0;height:36px;z-index:3;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;font-size:13px;font-weight:600;font-family:var(--font-sans)}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:70px;height:18px;background:#000;border-radius:9px}
.phone__status-icons{display:flex;align-items:center;gap:5px}
.phone__slide{position:absolute;top:36px;left:0;right:0;bottom:0;opacity:0;pointer-events:none;transition:opacity 400ms cubic-bezier(.2,.6,.3,1)}
.phone__slide.is-active{opacity:1;pointer-events:auto}
.phone__slide--fast{transition-duration:180ms}
.phone__slide img{width:100%;height:100%;object-fit:cover;display:block}
.phone-dots{display:flex;gap:8px;justify-content:center}
.phone-dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--border-default)}
.phone-dots button.is-active{background:var(--gold-500)}

/* control-panel tab buttons */
.panel-tab{background:transparent;border:1px solid var(--border-default)}
.panel-tab.is-active{background:var(--surface-card);border-color:var(--gold-600)}

/* small phone frame (four-up "look inside" row) */
.phone-sm{width:100%;max-width:220px;aspect-ratio:9/19;border-radius:26px;background:#000;overflow:hidden;padding:8px;box-shadow:var(--shadow-sm)}
.phone-sm .phone__screen{border-radius:19px;background:var(--surface-page)}
.phone-sm .phone__statusbar{height:26px;padding:0 16px;font-size:10px}
.phone-sm .phone__notch{top:7px;width:44px;height:12px;border-radius:6px}
.phone-sm .phone__status-icons{gap:3px}
.phone-sm .phone__slide{top:26px}
.phone-dots--sm button{width:6px;height:6px}

/* ---------- misc ---------- */
.placeholder-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-sunken);color:var(--text-subtle);font-size:var(--text-caption);text-align:center;padding:var(--space-3)}

@media (max-width:640px){
  .phone{border-radius:32px}
}