:root { --bg: #f6f7f9; --fg: #111827; --muted: #6b7280; --card: #fff; --line: #e5e7eb; --accent: #2563eb; --danger: #b91c1c; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #0b0f17; --fg: #e5e7eb; --muted: #9ca3af; --card: #151b26; --line: #263041; --accent: #60a5fa; --danger: #f87171; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
button { font: inherit; padding: .55rem 1rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; min-height: 44px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.big { width: 100%; padding: .9rem; font-size: 1.05rem; margin: .5rem 0 1rem; }
button.link { border: none; background: none; color: var(--accent); padding: .3rem .4rem; min-height: 0; }
button:disabled { opacity: .55; }
label { display: block; margin: .6rem 0; font-size: .9rem; color: var(--muted); }
input, textarea, select { display: block; width: 100%; font: inherit; font-size: 16px; padding: .6rem; margin-top: .25rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); color: var(--fg); }
form button { margin-top: .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--danger); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.devices { list-style: none; padding: 0; }
.devices li { display: flex; gap: .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.devices li button { margin-left: auto; }
.loading { min-height: 50vh; }
:root { --ws: #475569; }
.top { display: flex; align-items: center; gap: .7rem; position: sticky; top: 0; background: var(--bg); padding: .4rem 0; z-index: 5; border-bottom: 3px solid var(--ws); }
.top .heading { flex: 1; min-width: 0; }
.top h1 { margin: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.countline { margin: 0; font-size: .85rem; color: var(--muted); }
.iconbtn { border: none; background: none; font-size: 1.4rem; padding: .2rem .5rem; }
.switcher { position: relative; }
.wsbtn { border: none; background: none; padding: 0; min-height: 0; }
.wsicon { display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; color: #fff; font-weight: 700; flex: none; }
.wsicon.md { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
.wsicon.sm { width: 1.3rem; height: 1.3rem; font-size: .75rem; border-radius: .35rem; }
.wslist { position: absolute; top: 2.8rem; left: 0; z-index: 10; list-style: none; margin: 0; padding: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: .7rem; min-width: 14rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.wslist button { display: flex; gap: .6rem; align-items: center; width: 100%; border: none; background: none; text-align: left; }
.wslist li[aria-selected="true"] button { font-weight: 600; }
.search { margin: .6rem 0; }
.tabs { display: flex; gap: .3rem; margin: .7rem 0; }
.tabs button { flex: 1; min-height: 38px; padding: .35rem; border-radius: 2rem; }
.tabs button.on { background: var(--ws); border-color: var(--ws); color: #fff; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; margin: .45rem 0; }
.row > a, .row.news { display: block; padding: .7rem .8rem; color: inherit; text-decoration: none; }
.rowtop { display: flex; gap: .45rem; align-items: center; }
.row .title { font-weight: 600; flex: 1; min-width: 0; }
.row .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ws); flex: none; }
.row .q { margin-top: .25rem; }
.row .q.urgent::before { content: "● "; color: var(--danger); }
.row .sum { margin-top: .25rem; color: var(--muted); font-size: .92rem; }
.row .meta { margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.strip ul { list-style: none; padding: 0; margin: 0; }
.strip li { padding: .45rem .6rem; border-left: 3px solid var(--line); margin: .3rem 0; background: var(--card); border-radius: .3rem; }
.strip li.late { border-left-color: #d97706; }
section h2 .muted { font-weight: 400; }
.wslist li.sep { border-top: 1px solid var(--line); margin-top: .3rem; padding: .5rem .8rem .3rem; font-size: .9rem; }
a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font: inherit; padding: .55rem 1rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--card); color: var(--fg); min-height: 44px; }
a.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.flash { position: sticky; top: 3.6rem; z-index: 6; background: var(--fg); color: var(--bg); padding: .5rem .8rem; border-radius: .6rem; margin: .5rem 0; }
.allrec { width: 100%; margin: .5rem 0; }
.seenall { float: right; margin: .3rem 0; }
.notebox { margin: .7rem 0; }
.notebox .buttons, .buttons { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .45rem; }
.notebox select { width: auto; margin: 0; }
.card .cardtop { display: flex; align-items: center; gap: .55rem; position: sticky; top: 0; background: var(--bg); padding: .5rem 0; z-index: 5; border-bottom: 3px solid var(--ws); }
.card .cardtop .heading { flex: 1; min-width: 0; }
.card .cardtop h1 { font-size: 1.1rem; margin: 0; }
.card .cardtop p { margin: 0; }
.back { font-size: 1.8rem; text-decoration: none; color: var(--accent); padding: 0 .3rem; }
.menu { list-style: none; padding: .3rem; margin: .3rem 0; background: var(--card); border: 1px solid var(--line); border-radius: .7rem; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.menu button { width: 100%; text-align: left; border: none; background: none; }
.cardmenu { position: sticky; top: 3.6rem; z-index: 7; }
.ask { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--ws); border-radius: .8rem; padding: .8rem; margin: .7rem 0; }
.ask.urgent { border-left-color: var(--danger); }
.ask .asktop { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.ask .kind { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ask .action { font-size: .75rem; padding: .05rem .4rem; border-radius: .3rem; background: #fde68a; color: #78350f; }
.ask .action.money, .ask .action.delete { background: #fecaca; color: #7f1d1d; }
.ask .question { font-size: 1.12rem; margin: .4rem 0; }
.ask .why { color: var(--muted); font-size: .95rem; }
.ask .buttons button, .ask .buttons a.button { flex: 1 1 auto; }
.ask button.armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.askfoot { display: flex; justify-content: space-between; margin-top: .4rem; }
.ask .drop { margin-top: .2rem; }
.tiny { font-size: .75rem; }
.default { background: #fef3c7; color: #78350f; padding: .3rem .5rem; border-radius: .4rem; }
.answered { list-style: none; padding: 0; }
.answered li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.trip { font-size: .8rem; color: var(--muted); }
.since { background: var(--card); border: 1px solid var(--line); border-radius: .7rem; padding: .5rem .8rem; margin: .7rem 0; }
.since ul { list-style: none; padding: 0; }
.overview, .block { background: var(--card); border: 1px solid var(--line); border-radius: .7rem; padding: .7rem .9rem; margin: .7rem 0; }
.block h3 { margin: 0 0 .3rem; font-size: 1rem; }
.fold summary { font-weight: 600; cursor: pointer; }
.checklist, .links { list-style: none; padding: 0; }
.checklist li.done { color: var(--muted); text-decoration: line-through; }
.pics { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.pics figure { margin: 0; max-width: 100%; }
.pics img { max-width: 100%; max-height: 22rem; border-radius: .5rem; border: 1px solid var(--line); }
.pics figcaption { font-size: .8rem; color: var(--muted); }
.text p { margin: .35rem 0; }
.text pre { overflow-x: auto; background: rgba(127,127,127,.12); padding: .6rem; border-radius: .4rem; }
.text figure.code { margin: .4rem 0; }
.text figcaption { font-size: .75rem; color: var(--muted); }
.text blockquote { border-left: 3px solid var(--line); margin: .4rem 0; padding-left: .7rem; color: var(--muted); }
.text code { font-size: .9em; }
.sesslist { list-style: none; padding: 0; }
.sesslist li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.log ul { list-style: none; padding: 0; }
.log li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.log li.yours { border-left: 3px solid var(--ws); padding-left: .5rem; }
.logtop { display: flex; align-items: center; justify-content: space-between; }
.toggle { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--fg); }
.toggle input { width: auto; margin: 0; }
.sessionlinks { margin: .6rem 0; }
.sessionlinks a.button { flex: 1 1 auto; font-size: .9rem; }
a.button.switch { border-color: #d97706; }
.wslist li.sep2 { padding: .3rem .8rem .5rem; font-size: .9rem; }
.memlist { list-style: none; padding: 0; }
.memline { background: var(--card); border: 1px solid var(--line); border-radius: .7rem; padding: .6rem .8rem; margin: .45rem 0; }
.memtext { margin: 0 0 .3rem; }
.newmark { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: var(--ws); color: #fff; padding: .05rem .35rem; border-radius: .3rem; margin-right: .3rem; }
.memactions select { width: auto; margin: 0; padding: .3rem; font-size: .9rem; }
.danger { color: var(--danger) !important; }
.row2 { display: flex; gap: .7rem; }
.row2 label { flex: 1; min-width: 0; }
input[type="color"] { height: 2.6rem; padding: .2rem; }
.wsform summary { display: flex; gap: .5rem; align-items: center; }
.trip .sent { color: var(--accent); font-weight: 600; }

/* Time boxes on iOS have a wide intrinsic size: keep them inside their column (Settings, Alerts). */
input[type="time"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.update { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .7rem; background: var(--accent); color: #fff; padding: .4rem .8rem; border-radius: 0 0 .6rem .6rem; }
.update button.primary { background: #fff; color: var(--accent); border-color: #fff; min-height: 36px; padding: .3rem .9rem; }