/* OKR Platform shared styles. Clean and sober: this is read by people outside
   the team, often on a first visit. One accent color, generous whitespace. */
:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --line:#e2e2e7;
  --accent:#2563eb;
  --accent-soft:#eff4ff;
  --ok:#15803d;
  --ok-soft:#f0faf2;
  --warn:#b45309;
  --warn-soft:#fdf6ec;
  --bad:#b91c1c;
  --bad-soft:#fdf1f1;
  --radius:14px;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.55;
}
.wrap{max-width:800px; margin:0 auto; padding:36px 20px 130px}
h1{font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
h2{font-size:20px; font-weight:650; letter-spacing:-.01em; margin-top:8px}
p{margin-top:10px}
a{color:var(--accent)}
.lead{font-size:17px; color:var(--ink-soft); margin-top:12px; max-width:62ch}
.hint{font-size:13.5px; color:var(--ink-soft)}

/* privacy notice: visible, plain, never fine print */
.privacy{margin-top:12px; max-width:62ch; font-size:14.5px; color:var(--ink); background:var(--warn-soft); border:1px solid #ecd9b8; border-radius:10px; padding:10px 14px}

/* workspace list rows on the landing page */
.wsrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap}
.wsrow a{font-weight:600; text-decoration:none}
.wsrow a:hover{text-decoration:underline}

/* team / members panel in the wizard */
.memberrow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap}
.memberrow:last-child{border-bottom:none}
.membermail{font-size:14.5px; word-break:break-all}
.membertag{font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:2px 8px; margin-left:8px}

/* header */
.top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:26px}
.brand{font-weight:700; letter-spacing:-.01em}
.brand a{color:var(--ink); text-decoration:none}
.whoami{font-size:13.5px; color:var(--ink-soft)}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-top:18px}
.cardtag{display:inline-block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 10px; margin-bottom:10px}

/* good / bad example boxes */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.box{border-radius:12px; padding:14px 16px; font-size:14.5px; border:1px solid var(--line); background:#fafafc}
.box .t{font-weight:650; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
.box.good{border-color:#cde9d4; background:var(--ok-soft)} .box.good .t{color:var(--ok)}
.box.bad{border-color:#f2d4d4; background:var(--bad-soft)} .box.bad .t{color:var(--bad)}
.box .why{display:block; margin-top:8px; font-size:13px; color:var(--ink-soft)}

/* pyramid */
.pyr{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:16px}
.tier{border-radius:12px; padding:14px 18px; text-align:center; border:1px solid var(--line)}
.tier .tname{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.tier .tt{font-size:17px; font-weight:700; margin-top:2px}
.tier .ts{font-size:13.5px; color:var(--ink-soft); margin-top:6px}
.tier.apex{width:62%; background:var(--warn-soft); border-color:#ecd9b8}
.tier.mid{width:82%; background:var(--accent-soft); border-color:#cfdcf8}
.tier.base{width:100%; background:var(--ok-soft); border-color:#cde9d4}

/* question box */
.qbox{border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:16px; background:#fafafc}
.qbox .ql{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.qbox .qt{font-size:17px; font-weight:650; margin-top:6px}
.qrow{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.qc{border-radius:10px; padding:12px 14px; font-size:14px; border:1px solid var(--line)}
.qc .qch{font-weight:650; margin-bottom:4px}
.qc.yes{background:var(--ok-soft); border-color:#cde9d4}
.qc.no{background:var(--warn-soft); border-color:#ecd9b8}

/* SMART list */
.smart{margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.smart .l{display:flex; align-items:baseline; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:15px; background:var(--card)}
.smart .l:last-child{border-bottom:none}
.smart .l b{color:var(--accent); font-size:17px}
.smart .l span{color:var(--ink-soft); font-size:13.5px; margin-left:auto; text-align:right; max-width:60%}

/* KR types */
.kinds{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.k{border:1px solid var(--line); border-radius:10px; padding:12px 15px; font-size:14.5px; background:#fafafc}
.k b{color:var(--ink)}
.k i{color:var(--ink-soft)}

/* impact x control matrix */
.matrix{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.cell{border-radius:12px; padding:14px 16px; border:1px solid var(--line); font-size:14px; background:#fafafc}
.cell .ch{font-weight:700; margin-bottom:2px}
.cell .cs{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:6px}
.cell.safe{background:var(--ok-soft); border-color:#cde9d4}
.cell.bet{background:var(--warn-soft); border-color:#ecd9b8}
.cell.quickwin{background:var(--accent-soft); border-color:#cfdcf8}
.cell.drop{background:#f3f3f5; color:var(--ink-soft)}

/* mistakes list */
.mistakes{margin-top:10px; padding-left:0; list-style:none}
.mistakes li{padding:12px 0; border-bottom:1px dashed var(--line); font-size:15px}
.mistakes li:last-child{border-bottom:none}
.mistakes b{display:block; margin-bottom:2px}

/* wizard steps bar */
.steps{display:flex; gap:6px; margin-bottom:8px}
.steps .st{flex:1; height:6px; border-radius:999px; background:var(--line)}
.steps .st.on{background:var(--accent)}
.steplbl{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:14px 0 6px}

/* placeholder for steps built in the next run */
.placeholder{border:2px dashed var(--line); border-radius:var(--radius); padding:34px 24px; text-align:center; color:var(--ink-soft); margin-top:18px; font-size:15px}

/* bottom nav */
.nav{position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.nav .in{max-width:800px; margin:0 auto; padding:13px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.savest{font-size:12.5px; color:var(--ink-soft)}

/* buttons and forms */
.btn{appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:15px; font-weight:550; border-radius:10px; padding:10px 18px; cursor:pointer}
.btn:hover{border-color:#c9c9d0}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:#1d55cc}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.55; cursor:default}
input[type=text]{font:inherit; font-size:15px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); width:100%}
input[type=text]:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin:14px 0 5px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row input{flex:1; min-width:200px}
.err{color:var(--bad); font-size:13.5px; margin-top:8px; min-height:18px}
.notice{border:1px solid #ecd9b8; background:var(--warn-soft); border-radius:10px; padding:12px 15px; font-size:14px; margin-top:14px}
.codebox{font-family:var(--f-mono); font-size:20px; letter-spacing:.14em; background:#f3f3f5; border:1px solid var(--line); border-radius:10px; padding:10px 14px}
.linkbox{font-family:var(--f-mono); font-size:13px; background:#f3f3f5; border:1px solid var(--line); border-radius:10px; padding:11px 14px; word-break:break-all}

/* landing how-it-works */
.hiw{counter-reset:hiw; margin-top:6px; list-style:none; padding:0}
.hiw li{counter-increment:hiw; display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line); font-size:15px}
.hiw li:last-child{border-bottom:none}
.hiw li::before{content:counter(hiw); flex:0 0 28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:1px}

.hide{display:none !important}
.dim{color:var(--ink-soft)}

/* goal and key result form cards (steps 3 and 5) */
.itemcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px 20px; margin-top:16px}
.itemhead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.itemtag{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.btn.small{font-size:13px; padding:6px 12px; border-radius:8px}
select.f{font:inherit; font-size:14.5px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); width:100%}
select.f:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.fieldgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.fieldgrid.four{grid-template-columns:2fr 1fr 1fr 1fr}
.goalgroup{margin-top:26px}
.grouphead{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding-bottom:8px}
.grouphead h2{margin-top:0; font-size:19px}
.goalgroup .row{margin-top:14px}

/* direct pickers: type and commitment. Every option visible, one click each.
   Never a control that cycles in one direction. */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card)}
.seg button{appearance:none; border:none; background:transparent; font:inherit; font-size:14px; font-weight:550; color:var(--ink-soft); padding:8px 15px; cursor:pointer; border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--accent); color:#fff}

/* live sentence and deterministic check */
.phrasebox{margin-top:16px; border:1px solid var(--line); border-radius:10px; padding:12px 15px; background:#fafafc}
.phraselbl{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px}
.phrase{font-size:15px}
.phrasebox .btn{margin-top:10px}
.lightrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px}
.light{font-size:12.5px; font-weight:650; border-radius:999px; padding:4px 11px}
.light.l-ok{background:var(--ok-soft); color:var(--ok)}
.light.l-activity{background:var(--bad-soft); color:var(--bad)}
.light.l-no-measure{background:var(--warn-soft); color:var(--warn)}
.light.l-empty{background:#f3f3f5; color:var(--ink-soft)}
.lightnote{font-size:12.5px; color:var(--ink-soft)}

/* AI review results */
.reviewbar{display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap}
.statustxt{min-height:18px}
.aisummary{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-top:16px}
.rev{border-top:1px dashed var(--line); margin-top:16px; padding-top:14px}
.verdict{display:inline-block; font-size:12.5px; font-weight:650; border-radius:999px; padding:4px 11px}
.verdict.v-ok{background:var(--ok-soft); color:var(--ok)}
.verdict.v-warn{background:var(--warn-soft); color:var(--warn)}
.verdict.v-bad{background:var(--bad-soft); color:var(--bad)}
.revnote{font-size:14px; color:var(--ink-soft); margin-top:8px}
.suggest{margin-top:12px; background:var(--accent-soft); border:1px solid #cfdcf8; border-radius:10px; padding:12px 15px}
.suglbl{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:5px}
.sugtext{font-size:14.5px}
.suggest .btn{margin-top:10px}
.issues{margin-top:10px; padding-left:0; list-style:none}
.issues li{padding:9px 0 9px 22px; border-bottom:1px dashed var(--line); font-size:14.5px; position:relative}
.issues li:last-child{border-bottom:none}
.issues li::before{content:""; position:absolute; left:4px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--warn)}

/* publish and share */
.copyrow{display:flex; gap:10px; align-items:stretch; margin-top:12px; flex-wrap:wrap}
.copyrow .linkbox{flex:1; min-width:220px; display:flex; align-items:center}

/* read-only view page */
.viewkrs{margin-top:12px; border-top:1px solid var(--line)}
.viewkr{padding:12px 0; border-bottom:1px dashed var(--line)}
.viewkr:last-child{border-bottom:none}
.vktext{font-size:15px}
.vktags{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.vtag{font-size:11.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); background:#f3f3f5; border-radius:999px; padding:3px 9px}

@media (max-width:640px){
  .wrap{padding:24px 16px 120px}
  h1{font-size:25px}
  .vs,.qrow,.matrix{grid-template-columns:1fr}
  .tier.apex{width:88%} .tier.mid{width:95%}
  .smart .l span{max-width:50%}
  .fieldgrid,.fieldgrid.four{grid-template-columns:1fr}
}