/* Kestrel over the Hawks app: the compatibility layer.
   The design system lives in /ds (tokens, base, components). This file does two jobs until the app is ported
   screen by screen (docs/redesign-plan.md, phase 2): it restyles the old Hawks classes with the system's radii,
   surfaces and type, and it styles the pieces Kestrel added around the app (header, sign-in, teams, settings).
   Delete a block here when its screen moves to ds components. */

/* ---------- old Hawks classes, restyled */
body{letter-spacing:-0.005em;}
.card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);}
.card-title,.modal-head h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;}
.eyebrow,.section-label,.event-type-label,.admin-section-label{font-size:var(--fs-caption);font-weight:600;color:var(--text-2);letter-spacing:.01em;}
.page-head .eyebrow{color:var(--accent-ink);}
.page-title{font-family:var(--font-display);font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;}

button{border-radius:var(--r-pill);border-color:transparent;}
button.ghost{border:0;box-shadow:inset 0 0 0 1.5px var(--line);text-decoration:none;}
.pop-menu,.dd-menu,.modal-box{border-radius:var(--r-lg);box-shadow:var(--shadow-2);}
.pop-menu button,.dd-option{border-radius:var(--r-sm);}
.modal-box{border-radius:var(--r-xl);}
input,select,textarea{border-radius:var(--r-md);}

.seg{background:var(--surface-2);border:0;padding:4px;gap:2px;border-radius:var(--r-pill);}
.seg-btn{border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);}
.seg-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);}
.page-tabs{background:var(--surface-2);border:0;padding:4px;gap:2px;border-radius:var(--r-pill);}
.page-tab{border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);text-transform:none;letter-spacing:0;font-weight:600;}
.page-tab.active{background:var(--inverse);color:var(--on-inverse);box-shadow:none;}
.badge{border-radius:var(--r-pill);text-transform:none;letter-spacing:0;font-size:var(--fs-caption);}
.chip{border-radius:var(--r-pill);}

/* calendar: rounded day cells, today is filled, the selected day is ringed */
.grid{gap:4px;}
.day{border-radius:var(--r-sm);border:0;background:var(--surface);}
.day.empty{background:transparent;}
.day.today{background:var(--accent-subtle);}
.day.today .num{color:var(--accent-ink);font-weight:800;}
.day.selected{outline:2px solid var(--text);outline-offset:-2px;}
.day.you-away{opacity:1;background:repeating-linear-gradient(-45deg,transparent 0 7px,var(--line) 7px 8px),var(--surface);}

/* ---------- header */
.k-brand{display:flex;align-items:center;gap:var(--s-2);color:var(--text);text-decoration:none;}
.k-brand img{display:block;border-radius:9px;}
.wordmark{font-family:var(--font-display);}
.wordmark #secretTapZone{font-weight:800;letter-spacing:-.03em;}
.k-team{display:flex;align-items:center;gap:6px;min-width:0;}
.k-team select{border:0;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);padding:0 var(--s-3);font:600 14px var(--font-ui);max-width:220px;}
.k-who{display:flex;align-items:center;background:transparent;color:var(--text);border:0;font:600 14px var(--font-ui);cursor:pointer;}
header .head-right{display:flex;align-items:center;gap:12px;}

/* ---------- Kestrel AI */
.kai-mark{width:32px;height:32px;margin-right:var(--s-2);border-radius:var(--r-sm);background:none;}
.k-power{display:flex;align-items:center;gap:8px;font-size:var(--fs-footnote);color:var(--text-2);margin:-4px 0 10px;flex-wrap:wrap;}
.k-power b{color:var(--text);}
.kai-msg{border-radius:20px;}
.kai-msg.kai{background:var(--accent-subtle);border-bottom-left-radius:6px;}

/* ---------- Kestrel's own pieces */
.k-btn.small{height:32px;}
.k-small{font-size:13.5px;color:var(--text-2);margin:8px 0;}
.k-good{color:var(--positive);}
.k-bad{color:var(--danger);}
.k-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.k-row.spread{justify-content:space-between;}
.k-or{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:var(--text-2);font:600 12px var(--font-ui);}
.k-or::before,.k-or::after{content:"";flex:1;border-top:1px solid var(--line);}
.grow{flex:1;min-width:0;}
.mono{font-family:var(--font-mono);}
.k-accent-text{color:var(--accent);}
.k-dialog h2{margin:0 0 6px;font-size:22px;}
.k-dialog code{font-size:12.5px;background:var(--surface-2);padding:1px 6px;border-radius:var(--r-xs);word-break:break-all;}
.k-dialog form{display:flex;flex-direction:column;gap:16px;margin-top:10px;}
.k-dialog .k-label{margin:0 0 4px;}
.k-dialog .k-row{margin-top:0;}
.k-dialog .k-row > div{display:flex;gap:8px;flex:1;min-width:0;}
.k-dialog p.k-small{line-height:1.4;margin:4px 0 0;}
.k-dialog #kAiMsg{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:1.2em;}

/* team card */
.k-invite{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin:14px 0 6px;}
.k-code{font:500 24px var(--font-mono);letter-spacing:.14em;padding:6px 16px;border-radius:var(--r-md);background:var(--surface-2);}
.k-members{margin:10px 0;}
.k-member{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line);}
.k-member:first-child{border-top:0;}
.k-member .dot{width:14px;height:14px;border-radius:50%;}

/* ---------- the gate: sign-in, onboarding, first team (the landing page returns in phase 5) */
#kGate{max-width:1120px;margin:0 auto;padding:12px 16px 40px;font-family:var(--font-ui);color:var(--text);}
#kGate:empty{display:none;}
.k-landing{display:grid;gap:34px;padding-top:8px;}
.k-kicker{font:600 13px var(--font-ui);color:var(--accent-ink);margin-bottom:6px;}
.k-display{font-size:clamp(40px,11vw,104px);line-height:.95;letter-spacing:-.04em;margin:10px 0 22px;font-weight:800;overflow-wrap:anywhere;}
.k-title{font-size:clamp(36px,8vw,60px);line-height:1;letter-spacing:-.035em;margin:8px 0 22px;font-weight:800;}
.k-lede{font-size:19px;line-height:1.45;max-width:36em;color:var(--text-2);margin:0 0 10px;}
.k-auth{background:var(--surface);border-radius:var(--r-xl);padding:var(--s-5);box-shadow:var(--shadow-2);align-self:start;position:relative;}
.k-auth.narrow{max-width:480px;margin:24px auto 0;}
.k-auth h2{margin:0 0 14px;font-size:24px;}
.k-auth-chip{margin-bottom:var(--s-3);}
.k-auth .k-btn.primary{margin-top:16px;}
.k-start{max-width:880px;margin:0 auto;}
.k-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:10px 0 16px;}
.k-panel{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:var(--s-5);}
.k-panel h2{margin:0 0 4px;font-size:21px;}
.k-panel .k-btn{margin-top:14px;}
@media (min-width:900px){
  .k-landing{grid-template-columns:1.35fr 1fr;gap:64px;padding-top:24px;}
}

/* landing: hero watermark, product showcase */
.k-hero{position:relative;isolation:isolate;}
.k-watermark{position:absolute;z-index:-1;right:-6%;bottom:-70px;width:min(70vw,380px);color:var(--text);pointer-events:none;}
.k-auth a,.k-foot a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:3px;}
.k-top{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) 0 var(--s-2);}
.k-top .k-brand{gap:var(--s-3);}
.k-top .k-brand img{border-radius:13px;}
.k-top-word{font:800 30px var(--font-display);letter-spacing:-.04em;}
.k-section-title{font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.035em;margin:0 0 var(--s-5);font-weight:800;}
.k-showcase{margin-top:var(--s-8);display:grid;gap:var(--s-8);}
.k-shots{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:start;}
.k-shot{margin:0;}
.k-phone{padding:8px;border-radius:38px;background:var(--inverse);box-shadow:var(--shadow-2);}
.k-phone img{display:block;width:100%;height:auto;border-radius:30px;}
.k-shot figcaption{margin-top:var(--s-4);color:var(--text-2);font-size:15px;line-height:1.45;}
.k-shot figcaption b{display:block;color:var(--text);font:700 19px var(--font-display);margin-bottom:4px;}
.k-lablead{display:grid;gap:var(--s-6);align-items:center;padding:var(--s-6) var(--s-5);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-1);}
.k-lablead .k-chip{margin-bottom:var(--s-4);}
.k-checks{list-style:none;margin:var(--s-4) 0 var(--s-5);padding:0;display:grid;gap:var(--s-2);}
.k-checks li{position:relative;padding-left:28px;font-size:15.5px;}
.k-checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--accent);}
.k-checks li::after{content:"";position:absolute;left:6px;top:7px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(40deg);}
.k-browser{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);background:var(--inverse);padding:6px;}
.k-browser img{display:block;width:100%;height:auto;border-radius:calc(var(--r-lg) - 6px);}
.k-foot{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-5) 0;border-top:1px solid var(--line);font:800 18px var(--font-display);letter-spacing:-.03em;}
.k-foot img{border-radius:8px;}
.k-foot .k-small{margin:0 0 0 auto;font:400 13.5px var(--font-ui);letter-spacing:0;}
@media (min-width:900px){
  .k-lablead{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);padding:var(--s-7) var(--s-7);}
  .k-watermark{right:4%;bottom:-175px;width:520px;}
}
@media (max-width:699px){
  .k-shots{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-4);margin:0 -16px;padding:0 16px var(--s-3);scrollbar-width:none;}
  .k-shots::-webkit-scrollbar{display:none;}
  .k-shot{scroll-snap-align:center;}
}

.k-steps{display:flex;gap:6px;margin-bottom:var(--s-4);}
.k-steps i{flex:1;height:4px;border-radius:2px;background:var(--surface-2);}
.k-steps i.done{background:var(--accent);opacity:.55;}
.k-steps i.on{background:var(--accent);}
.k-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.k-nav{display:flex;gap:10px;margin-top:16px;}
.k-nav .k-btn.primary{margin-top:0;}
.k-auth textarea.k-input{min-height:64px;resize:vertical;}
.k-ai-fill{display:grid;gap:8px;padding:var(--s-3);border-radius:var(--r-lg,14px);background:var(--surface-2);margin-bottom:var(--s-4);}
.k-ai-fill .k-label{margin:0;}
.k-ai-fill .k-btn{justify-self:start;}
.k-rule{display:none;}