/* ============================================================
   helloPapa UI: accounts and community (docs/11): the sign-in card, forms, messages, the profile header,
   the person and recipe lists. Link ui/tokens.css and ui/ui.css first. Tokens only, never a raw colour;
   every control is 48 px or more.
   ============================================================ */

/* ---------- page frame ---------- */
.ac-head{max-width:46em;margin-bottom:28px}
.ac-head h1{font-size:clamp(34px,5vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:14px 0 12px;outline:none}
.ac-head p{font-size:18px;color:var(--ink-2)}
.ac-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px 30px 26px;max-width:480px}
.ac-card.wide{max-width:720px}
.ac-card+.ac-card{margin-top:20px}
.ac-card h2{font-size:22px;letter-spacing:-.03em;font-weight:800;margin-bottom:6px}
.ac-card>p{color:var(--ink-2);font-size:15px;margin-bottom:16px}
.ac-card .btn.block{width:100%}
.ac-card .btn.block+.btn.block{margin-top:10px}
.btn-danger{background:transparent;color:var(--accent-text);border:1px solid var(--accent)}
.btn-danger:hover{background:var(--accent-soft)}

/* ---------- forms ---------- */
.fld{display:grid;gap:8px;margin-bottom:16px}
.fld>label,.fld>.lbl{font-weight:700;font-size:15px}
.fld .hint{font-size:13.5px;color:var(--ink-3)}
.fld .hint.good{color:var(--herb-text)}
.fld .hint.bad{color:var(--accent-text)}
.field[aria-invalid="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.field{min-height:112px;resize:vertical;line-height:1.5}
.at{position:relative}
.at>span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:700;pointer-events:none}
.at>.field{padding-left:36px}
.chk{display:flex;gap:14px;align-items:center;min-height:48px;margin-bottom:16px;cursor:pointer;font-weight:600}
.chk input{width:24px;height:24px;flex:none;accent-color:var(--accent)}
.fld .chk{margin-bottom:0;font-weight:500;font-size:14.5px;color:var(--ink-2)}
.msg{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:12px 16px;font-size:14.5px;background:var(--surface-2);color:var(--ink-2);margin-bottom:16px}
.msg.err{background:var(--accent-soft);color:var(--accent-ink)}
.msg.ok{background:var(--herb-soft);color:var(--herb-text)}
.msg .icon{margin-top:2px;width:18px;height:18px}
.linkbtn{min-height:48px;padding:0 6px;font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.linkbtn[disabled]{color:var(--ink-3);text-decoration:none;cursor:default}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.ac-note{font-size:13px;color:var(--ink-3);margin-top:14px}
.ac-card .sub{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.ac-card .confirm{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
#flash:empty{display:none}
#flash .msg{max-width:46em}
[hidden]{display:none !important}

/* ---------- Apple, Google and X: shown, switched off ---------- */
.or{display:flex;align-items:center;gap:14px;margin:22px 0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.soc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.soc-btn{display:grid;justify-items:center;align-content:center;gap:2px;min-height:76px;padding:10px 6px;border-radius:var(--r-btn);background:transparent;border:1px dashed var(--line-2);color:var(--ink-3);cursor:not-allowed}
.soc-btn .icon{width:22px;height:22px}
.soc-btn b{font-size:14px;color:var(--ink-2)}
.soc-btn small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- a profile ---------- */
.ava{width:96px;height:96px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:40px;flex:none}
.prof{display:grid;grid-template-columns:auto 1fr auto;gap:18px 26px;align-items:center;margin-bottom:28px}
.prof h1{font-size:clamp(30px,4.4vw,48px);line-height:1.04;letter-spacing:-.04em;font-weight:800;outline:none;overflow-wrap:anywhere}
.prof .handle{font-family:var(--mono);font-size:14px;color:var(--ink-3);margin-top:4px}
.prof .bio{margin-top:10px;color:var(--ink-2);max-width:40em;overflow-wrap:anywhere}
.counts{display:flex;flex-wrap:wrap;gap:0 30px;margin-top:10px}
.count{display:grid;align-content:center;justify-items:start;min-height:48px;padding:0;text-align:left;border-radius:8px}
.count b{font-size:22px;letter-spacing:-.02em;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.count span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.count:hover span,.count[aria-expanded="true"] span{color:var(--accent-text)}
.people{margin:0 0 28px;max-width:560px}
.people h2{font-size:20px;letter-spacing:-.025em;font-weight:800;margin-bottom:12px}
.plist{display:grid;gap:8px}
.person{display:flex;gap:14px;align-items:center;min-height:56px;padding:8px 14px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow)}
.person:hover{background:var(--surface-2)}
.person b{display:block;font-weight:700}
.person small{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.ava.sm{width:40px;height:40px;font-size:18px}
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sect{margin-top:40px}
.sect>h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.035em;font-weight:800;margin-bottom:6px}
.sect>p{color:var(--ink-2);margin-bottom:18px;max-width:40em}

@media (max-width:700px){
  .prof{grid-template-columns:auto 1fr}
  .prof .acts{grid-column:1/-1}
  .ava{width:72px;height:72px;font-size:30px}
}
@media (max-width:600px){
  .ac-card{padding:24px 20px 22px}
}

/* ---------- recipes by cooks: cards, the cook-along's community section, the byline, appreciate and report ---------- */
.ccard{display:flex;gap:16px;align-items:center;text-align:left;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 20px 16px 16px;min-height:112px;width:100%;border:1px solid transparent;color:inherit;text-decoration:none;transition:border-color var(--dur-base) var(--ease)}
.ccard .plate{width:88px;height:88px;padding:10px;border-radius:var(--r-md)}
.ccard .cbody{display:grid;gap:4px;min-width:0}
.ccard .kick{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--accent-text)}
.ccard .h{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.ccard .by{display:block;font-size:13.5px;color:var(--ink-3);overflow-wrap:anywhere}
.ccard .cmeta{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.ccard .heart{display:inline-flex;align-items:center;gap:5px}
.ccard .heart .icon{width:15px;height:15px;color:var(--accent-text)}
@media (hover:hover){.ccard:hover{border-color:var(--line-2)}}
.ccard[disabled]{opacity:.7;cursor:progress}
.community{margin-top:64px}
.community-head{display:flex;gap:16px 28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.community-head h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.04em;font-weight:800;margin:8px 0 6px}
.community-head p{color:var(--ink-2);max-width:34em}
.community-grid,.rcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.rcards li{list-style:none}
.byline{display:grid;gap:10px;margin:14px 0 4px;justify-items:start}
.byline .msg{margin-bottom:0}
.who-by{font-size:15px}
.who-by .mono{color:var(--ink-3);text-transform:none;letter-spacing:.02em}
.appr{margin-top:14px;display:grid;gap:10px}
.appr-row{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.appr-n{font-size:14px;color:var(--ink-2)}
.appr .btn.on{border-color:var(--accent);color:var(--accent-text)}
.appr .btn.on .icon{fill:currentColor}
.report{margin-top:16px}
.report-form{margin-top:14px;display:grid;gap:12px;max-width:520px}
.rp-reasons{border:0;padding:0;margin:0;display:grid}
.rp-reasons legend{font-weight:700;margin-bottom:6px;padding:0}
.rp-reasons .chk{margin-bottom:0}
.done-appr{margin-top:18px}
.done-appr .kick{display:block}
.sect .rc-head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.sect .rc-head h2{margin-bottom:0}
.rc-state{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-3)}
.rc-state.public{background:var(--herb-soft);color:var(--herb-text)}
.rc-state.removed{background:var(--accent-soft);color:var(--accent-ink)}
.rc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow);padding:12px 16px}
.rc-row .what{flex:1 1 240px;min-width:0}
.rc-row h3{font-size:17px;letter-spacing:-.015em;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.rc-row .meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:6px;font-size:13px;color:var(--ink-3)}
.rc-row .msg{flex:1 1 100%;margin:0}
.rc-list{display:grid;gap:10px}

/* ---------- the writing page ---------- */
.wr-main{padding-top:48px;padding-bottom:96px}
.wr-form{max-width:760px}
.wr-form h2{font-size:24px;letter-spacing:-.03em;font-weight:800;margin:30px 0 4px}
.wr-state{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wr-state.published{color:var(--herb-text)}
.wr-state.removed{color:var(--accent-text)}
.wr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 16px}
select.field{appearance:auto;min-height:52px}
.dishpick{border:0;padding:0;margin:0 0 20px}
.dishpick legend{font-weight:700;font-size:15px;padding:0;margin-bottom:10px}
.dish-row{display:flex;flex-wrap:wrap;gap:10px}
.dp{display:block;cursor:pointer;border-radius:var(--r-md)}
.dp .plate{width:64px;height:64px;padding:8px;border:2px solid transparent}
.dp input:checked+.plate{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dp:focus-within .plate{outline:2px solid var(--ink);outline-offset:2px}
.dp:hover .plate{border-color:var(--line-2)}
.dp input:checked+.plate:hover{border-color:var(--accent)}
.probs{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:13.5px;color:var(--accent-text)}
.stepcards{display:grid;gap:14px;list-style:none;padding:0;margin:14px 0}
.stepcard{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:14px 20px 6px}
.sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sc-tools{display:flex;gap:2px}
.sbtn{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;color:var(--ink-2)}
.sbtn:hover:not([disabled]){background:var(--surface-2);color:var(--ink)}
.sbtn[disabled]{opacity:.35;cursor:default}
.sc-tools .up .icon{transform:rotate(180deg)}
.wr-bar{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 14px}
.confirm-card{margin-top:8px}