/* Ling Playground — cloud diary skeleton.
   Rules carried over from space-3 (2026-11-01 published local version):
   warm peach background, terracotta orange, capsule buttons, no green
   confirmation (user is red-green colour-blind), centred time pickers. */
:root{
  --bg:#fdf1e7; --ink:#3a2a1f; --orange:#c86236; --orange-dark:#a34e28;
  --card:#fffaf3; --line:#e8d5c2; --pale:#f7e6d6;
  --readable:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --round:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--readable);font-size:19px}
main{max-width:560px;margin:0 auto;padding:16px 16px 40px}
h1{font-family:var(--round);font-size:26px;margin:8px 0 14px;text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 14px}
.card h2{font-size:20px;margin:0 0 14px}
.row{display:flex;gap:10px;align-items:center}
button{font-family:var(--round);cursor:pointer;border-radius:999px;border:2px solid var(--orange);
  background:var(--orange);color:#fff;min-height:60px;padding:0 18px;font-size:19px;
  box-shadow:0 4px 0 var(--orange-dark);transition:transform .12s,box-shadow .12s,background .12s}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--orange-dark);background:var(--orange-dark)}
button.secondary{background:transparent;color:var(--orange);box-shadow:0 3px 0 var(--line)}
button.small{min-height:52px;font-size:17px;padding:0 14px}
button.primary{flex:1.5;min-height:68px;font-size:20px}
button.secondary-mid{flex:1;min-height:60px;background:transparent;color:var(--orange)}
button.clear-btn{flex:.78;min-height:52px;font-size:16px;background:#fff;color:#8a7a6d;border-color:var(--line);box-shadow:0 2px 0 var(--line)}
/* Confirmed state: dark, pressed-in, large check — never green. */
button.confirmed,.confirmed{background:#3a2a1f!important;color:#fff!important;border-color:#3a2a1f!important;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.45)!important;transform:translateY(4px)}
button.confirmed .tick,.confirmed .tick{font-size:31px}
.status{font-size:17px;margin-left:2px}
.status .tick{font-size:26px}
/* Top "start a new day" capsule */
.start-day{width:100%;min-height:64px;font-size:21px}
/* History icon: 52px touch area, orange notebook, no circle, no text */
.history-btn{width:52px;height:52px;min-height:52px;padding:0;background:transparent;border:none;box-shadow:none;color:var(--orange);font-size:30px}
.history-btn:active{background:transparent;transform:translateY(2px)}
/* Time pickers: centred like AM/PM buttons */
select{font-family:var(--readable);font-size:19px;text-align:center;text-align-last:center;
  padding:12px 34px 12px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='18'><text x='0' y='8' font-size='10' fill='%23c86236'>▲</text><text x='0' y='18' font-size='10' fill='%23c86236'>▼</text></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.am-pm{display:flex;gap:10px;margin:10px 0}
.am-pm button{flex:1;background:transparent;color:var(--ink);border-color:var(--line);box-shadow:0 3px 0 var(--line)}
.am-pm button.selected{background:var(--orange);color:#fff;border-color:var(--orange)}
.time-row{display:flex;gap:10px;margin:10px 0}
.time-row select{flex:1}
.hidden{display:none!important}
.notice{background:#fff3d6;border:1px solid #e8c87a;border-radius:12px;padding:12px;font-size:17px;margin:0 0 14px}
label{font-size:17px}
input[type="email"],input[type="password"],input[type="date"],input[type="month"]{
  width:100%;font-size:19px;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff}
.detail-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.detail-row button{min-height:48px;font-size:17px;background:transparent;color:var(--ink);border-color:var(--line);box-shadow:0 2px 0 var(--line)}
.detail-row button.selected{background:var(--orange);color:#fff;border-color:var(--orange)}
/* Segmented detail groups (2026-11-01, from the segmented mockup):
   one question = one connected bar, vertical dividers between options,
   selected segment sinks in dark (never green). Groups are spaced apart
   from their label and from the next group, so they do not read like the
   big Record / Backfill action buttons. Future detail groups restored
   from space-3 (urgency, stool form, amount, blood/mucus, belly pain)
   should use .field > label + .segment, not separate capsules. */
.field{margin:28px 0 0}
.field label{display:block;font-size:20px;font-weight:700;margin:0 0 12px}
.segment{display:flex;background:#fff;border:2px solid var(--line);border-radius:16px;overflow:hidden;margin:20px 0 16px}
.segment button{flex:1;min-width:0;min-height:56px;padding:0 8px;font-size:19px;
  background:transparent;color:var(--ink);border:0;border-radius:0;box-shadow:none;white-space:nowrap}
.segment button + button{border-left:2px solid var(--line)}
.segment button:active{background:var(--pale)}
.segment button.selected,.segment button[aria-pressed="true"]{
  background:#3a2a1f!important;color:#fff!important;font-weight:700;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.45)!important}
.segment + .segment{margin-top:8px}
.day-nav{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.day-nav button{min-height:52px}
.list-item{border-top:1px solid var(--line);padding:10px 0;display:flex;justify-content:space-between;gap:10px}

/* Language toggle: visible, secondary (not orange-primary), top-right.
   Dad uses Chinese by default; reviewers switch to EN here. */
.lang-row{display:flex;justify-content:flex-end;margin-bottom:2px}
.lang-toggle{min-height:48px;padding:0 18px;font-size:17px;background:transparent;color:var(--orange);
  border:2px solid var(--line);box-shadow:0 2px 0 var(--line)}
.lang-toggle:active{background:var(--pale)}