:root {
  color-scheme: light;
  --bg: #f3f3e9; --card: #fdfdf8; --ink: #23261b; --muted: #6c705d; --line: #dedfcd; --line2: #c3c6ab;
  --brand: #3f4a26; --accent: #66762c; --on-accent: #fff; --ok: #2f7d5b; --warn: #c27a12; --bad: #b3372f;
  --field: #fff; --today: #eef0d8; --offbg: #e9eadc; --offink: #83876f;
  --okbg: #e3f1ea; --okline: #b9dccb; --okink: #1f5c41;
  --badbg: #fbe9e7; --badline: #ecb9b4;
  --warnbg: #fbefd9; --warnline: #ecd09c; --warnink: #7a5312;
  --chatmine: #dfe6c0; --shade: rgba(30, 36, 18, .45);
  --radius: 12px;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #16180f; --card: #20231a; --ink: #ecefe0; --muted: #a2a791; --line: #333828; --line2: #4f5541;
  --brand: #0f110a; --accent: #a9bb5a; --on-accent: #171a0d; --ok: #3f9a72; --warn: #d9952e; --bad: #e0685f;
  --field: #1a1c14; --today: #2a2e1b; --offbg: #2a2d22; --offink: #999e87;
  --okbg: #1d3329; --okline: #2f5a45; --okink: #9ad6b6;
  --badbg: #45221f; --badline: #7a3a34;
  --warnbg: #3d3018; --warnline: #6e5522; --warnink: #e6c37a;
  --chatmine: #39411f; --shade: rgba(0, 0, 0, .6);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1 { font-size: 1.25rem; margin: 0 0 .6rem; }
h2 { font-size: 1.02rem; margin: 0 0 .6rem; }
.muted { color: var(--muted); } .small { font-size: .82rem; } .nowrap { white-space: nowrap; }
.grow { flex: 1; }

.top { background: var(--brand); color: #eef1dc; display: flex; align-items: center; gap: 14px; padding: 8px 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 650; }
.nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.nav a { color: #dfe4c8; text-decoration: none; padding: 7px 11px; border-radius: 8px; white-space: nowrap; }
.nav a.on { background: #eef1dc; color: var(--brand); font-weight: 600; }
.who { display: flex; align-items: center; gap: 10px; font-size: .85rem; margin-left: auto; }
.who .lang { color: #dfe4c8; border: 1px solid #7a845a; border-radius: 6px; padding: 1px 6px; text-decoration: none; }
.who form { margin: 0; }
button.link { background: none; border: 0; color: #dfe4c8; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.badge { background: var(--bad); color: #fff; border-radius: 99px; font-size: .72rem; padding: 1px 6px; margin-left: 5px; font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 14px; }
.card.narrow { max-width: 400px; margin: 8vh auto; }
details.card > summary { cursor: pointer; font-weight: 600; }
details.card[open] > summary { margin-bottom: 12px; }
.flash { padding: 10px 14px; border-radius: 10px; margin: 0 0 10px; background: var(--okbg); border: 1px solid var(--okline); }
.flash.err { background: var(--badbg); border-color: var(--badline); } .flash.warn { background: var(--warnbg); border-color: var(--warnline); }

.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row.end { justify-content: flex-end; } .row.tight { gap: 6px; flex-wrap: nowrap; }
label { display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--field); min-width: 0; }
input[type=number] { width: 5em; } input[type=checkbox] { width: 18px; height: 18px; } input[type=color] { padding: 2px; width: 44px; height: 36px; }
textarea { width: 100%; resize: vertical; }
.narrowform { max-width: 420px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
legend { font-size: .82rem; color: var(--muted); padding: 0 4px; }
form.inline { display: inline; }

.btn { font: inherit; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--line2); background: var(--field); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.publish { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn.warn { background: var(--warnbg); border-color: var(--warn); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.small { padding: 4px 9px; font-size: .84rem; }
.pill { display: inline-block; border-radius: 99px; padding: 2px 10px; font-size: .8rem; }
.pill.ok { background: var(--okbg); color: var(--okink); } .pill.draft { background: var(--warnbg); color: var(--warnink); }

.bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.weeknav { display: flex; align-items: center; gap: 8px; } .weeknav h1 { margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; } .actions form { margin: 0; }

.gridwrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table.grid { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; }
.grid col.c-name { width: 120px; } .grid col.c-sum { width: 76px; }
.grid th, .grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 4px; text-align: center; }
.grid thead th { font-size: .82rem; color: var(--muted); font-weight: 600; padding: 8px 4px; }
.grid thead th small { display: block; font-size: 1rem; color: var(--ink); }
.grid th.namecol { text-align: left; padding: 6px 12px; position: sticky; left: 0; background: var(--card); z-index: 2; white-space: nowrap; font-weight: 600; }
.grid .today { background: var(--today); }
.grid tr.mine th.namecol { color: var(--accent); }
.grid td.sum { font-weight: 600; white-space: nowrap; } .grid .sum small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; }
.grid tfoot th.namecol { font-weight: 400; font-size: .84rem; color: var(--muted); }
.grid td.cover { font-size: .86rem; color: var(--muted); }
.grid td.cover.short { color: var(--bad); font-weight: 700; background: var(--badbg); } .grid td.cover.over { color: var(--warn); }

.cell { --c: #6b6058; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 46px; border: 1px dashed transparent; border-radius: 9px; background: transparent; font: inherit; color: #b9aca0; padding: 3px 2px; }
button.cell { cursor: pointer; } button.cell:hover { border-color: var(--accent); }
.cell.shift { background: var(--c); color: #fff; font-weight: 700; border-style: solid; border-color: var(--c); }
.cell.shift.custom { background: var(--field); color: var(--ink); border-color: var(--line2); font-weight: 600; font-size: .84rem; }
.cell.shift.auto:not(.custom) { background: color-mix(in srgb, var(--c) 22%, var(--field)); color: var(--c); }
.cell.off { background: var(--offbg); color: var(--offink); font-weight: 700; }
.cell.bad { outline: 2.5px solid var(--bad); outline-offset: 1px; }
.cell .dot { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.hint { font-style: normal; font-size: .68rem; font-weight: 600; line-height: 1.1; color: var(--bad); background: var(--field); border: 1px solid var(--badline); border-radius: 5px; padding: 0 3px; margin-top: 2px; }
.hint.pending { border-style: dashed; color: var(--warn); border-color: var(--warn); }
.chip { --c: #6b6058; display: inline-block; min-width: 24px; text-align: center; background: var(--c); color: #fff; font-weight: 700; border-radius: 6px; padding: 1px 6px; font-size: .84rem; }
.chip.off { background: var(--offbg); color: var(--offink); } .chip.autochip { background: #e3dcf0; color: #5b4a8a; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 2px 16px; }

table.needs { border-collapse: collapse; } .needs th, .needs td { padding: 4px 6px; font-size: .86rem; text-align: center; } .needs th:first-child { text-align: left; white-space: nowrap; }
.needs input { width: 3.6em; padding: 5px 6px; text-align: center; }

dialog { background: var(--card); color: var(--ink); border: 0; border-radius: 16px; padding: 18px; width: min(460px, 94vw); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
dialog::backdrop { background: var(--shade); }
dialog h2 { margin: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.choice { --c: #6b6058; display: flex; align-items: center; gap: 8px; text-align: left; border: 2px solid var(--c); background: var(--field); border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; font-size: .8rem; color: var(--muted); }
.choice b { background: var(--c); color: #fff; border-radius: 7px; min-width: 34px; padding: 6px 4px; text-align: center; font-size: 1rem; }
.choice.offc { --c: #b9aca0; }

.scroll { overflow-x: auto; }
table.list { border-collapse: collapse; width: 100%; }
.list th, .list td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.list .num { text-align: right; font-variant-numeric: tabular-nums; } .list .neg { color: var(--bad); }
.list tr.inactive { opacity: .55; } .list tr.bad td { background: var(--badbg); } .list tr.hl td { background: var(--today); }
.list.logs input[type=datetime-local] { width: 12.5em; } .list.team input[name=name] { width: 10em; }

.clock { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.clock.running { border-color: var(--ok); background: var(--okbg); }
.clock .big { font-size: 1.15rem; margin: 4px 0; } .clock p { margin: 4px 0; }
.clockbtn { font-size: 1.1rem; padding: 16px 26px; border-radius: 14px; color: #fff; font-weight: 700; border: 0; }
.clockbtn.start { background: var(--ok); } .clockbtn.stop { background: var(--bad); }
ul.shifts, ul.threads { list-style: none; margin: 0 0 10px; padding: 0; }
.shifts li { display: flex; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.shifts li.today { background: var(--today); border-radius: 8px; } .shifts .when { min-width: 9.5em; font-weight: 600; }
.kpis { display: flex; gap: 12px; margin-bottom: 10px; } .kpis div { background: var(--bg); border-radius: 10px; padding: 10px 16px; }
.kpis b { font-size: 1.3rem; display: block; } .kpis span { color: var(--muted); font-size: .8rem; }
.notices { border-color: var(--warn); background: var(--warnbg); } .notices p { margin: 0 0 6px; }
.invite { border-color: var(--ok); background: var(--okbg); } .invite input { width: 100%; font-family: ui-monospace, monospace; font-size: .84rem; }

.req { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.req:last-child { border-bottom: 0; } .quote { margin: 4px 0; font-style: italic; }
.threads a { display: flex; gap: 10px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; flex-wrap: wrap; }
.chat .msg { max-width: 82%; background: var(--offbg); border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; }
.chat .msg.mine { margin-left: auto; background: var(--chatmine); } .chat .msg p { margin: 0 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat .send { margin-top: 14px; flex-wrap: nowrap; } .chat .send textarea { flex: 1; }

}

.announce { border-color: var(--accent); background: var(--warnbg); }
.announce .body, .ann .body { margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.announce .body { font-size: 1.05rem; }
.ann { padding: 10px 0; border-top: 1px solid var(--line); margin-top: 10px; }
.ann.new { background: var(--warnbg); border-radius: 8px; padding: 10px; }

.who .theme { background: none; border: 1px solid #7a845a; border-radius: 6px; color: #dfe4c8; cursor: pointer; font: inherit; padding: 1px 7px; line-height: 1.3; }
:root[data-theme=dark] .cell.shift.auto:not(.custom) { color: color-mix(in srgb, var(--c) 55%, #fff); }
:root[data-theme=dark] .chip.autochip { background: #3a3350; color: #c9bdf0; }

/* names in full on a wide screen, initials on a phone */
.ini, .grid .hrs { display: none; }

@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  main { padding: 10px; } .top { padding: 8px 10px; gap: 8px; position: static; }
  .who .name { display: none; }
  input, select, textarea { font-size: 16px; }  /* smaller text makes iPhones zoom the page */
  .btn { padding: 10px 14px; } .btn.small { padding: 7px 11px; }
  .row.tight { flex-wrap: wrap; } .clockbtn { width: 100%; } .clock form { width: 100%; }

  /* the menu sits under the thumb */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--brand); gap: 0;
         padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #59633c; }
  .nav a { flex: 1 0 auto; text-align: center; padding: 10px 10px; font-size: .9rem; }

  /* the week fits the screen: initials, short cells, hours under the initials */
  .full { display: none; } .ini { display: inline; } p.ini { display: flex; }
  .grid .hrs { display: block; font-weight: 400; font-size: .64rem; color: var(--muted); }
  table.grid { min-width: 0; }
  .grid col.c-name { width: 40px; } .grid col.c-sum { display: none; } .grid .sum { display: none; }
  .grid th, .grid td { padding: 2px 1px; }
  .grid th.namecol { padding: 4px 2px; text-align: center; font-size: .95rem; }
  .grid thead th { font-size: .7rem; padding: 6px 0; } .grid thead th small { font-size: .9rem; }
  .cell { min-height: 44px; border-radius: 7px; padding: 2px 0; font-size: .9rem; }
  .cell.shift.custom { font-size: .68rem; letter-spacing: -.02em; }
  .hint { font-size: .56rem; padding: 0 1px; }
  .grid td.cover { font-size: .74rem; }
  .actions .btn { flex: 1 1 46%; text-align: center; } .actions form { flex: 1 1 46%; display: flex; } .actions .grow { display: none; }
  .weeknav h1 { font-size: 1.05rem; }
  .needs input { width: 2.6em; padding: 6px 2px; font-size: 15px; } .needs th, .needs td { padding: 3px 1px; font-size: .74rem; }
  .list th, .list td { padding: 7px 5px; }
  .shifts .when { min-width: 0; flex-basis: 100%; }
  .req form.row { width: 100%; } .req form.row input { flex: 1; }
  dialog { padding: 14px; } .choices { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .grid col.c-sum { display: table-column; width: 0; }
  .actions { gap: 6px; } .actions form { flex: 1 1 30%; }
  .actions .btn { flex: 1 1 100%; width: 100%; white-space: normal; font-size: .8rem; line-height: 1.15; padding: 9px 4px; }
}
.weeknav h1 { white-space: nowrap; }
@media (max-width: 640px) { .weeknav { gap: 6px; } .weeknav .btn.ghost { padding: 10px 6px; } }

.grid .sum small.worked { color: var(--ink); margin-top: 2px; }
.grid .hrs b { color: var(--accent); font-weight: 700; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.list.totals td, .list.totals th { padding: 8px 6px; }

/* every page is always reachable: wide screens wrap the menu, phones get a Menu button */
.morebtn { display: none; } .moremenu { display: contents; }
@media (max-width: 640px) {
  .nav { flex-wrap: nowrap; }
  .nav > a, .morebtn { flex: 1 1 0; min-width: 0; padding: 10px 2px; font-size: .82rem; text-align: center; white-space: nowrap; }
  .morebtn { display: block; background: none; border: 0; border-radius: 8px; color: #dfe4c8; font: inherit; font-size: .82rem; cursor: pointer; }
  .morebtn.on { background: #eef1dc; color: var(--brand); font-weight: 600; }
  .nav .badge { margin-left: 2px; padding: 0 5px; }
  .moremenu { display: none; position: fixed; right: 8px; bottom: calc(58px + env(safe-area-inset-bottom)); min-width: 200px;
              background: var(--brand); border: 1px solid #59633c; border-radius: 12px; padding: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
  .nav.open .moremenu { display: grid; gap: 2px; }
  .moremenu a { text-align: left; padding: 13px 14px; font-size: 1rem; }
}

.brand img { border-radius: 50%; }
.biglogo { display: block; margin: 0 auto 12px; border-radius: 50%; }
.card.narrow h1 { text-align: center; }

/* compact lists of people: one tight line each */
.card.dense { padding: 10px 12px; } .card.dense h2 { margin-bottom: 6px; } .card.dense > p { margin: 6px 0 0; }
.person { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.person.inactive { opacity: .55; }
.pf { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; flex: 1 1 470px; margin: 0; }
.pf input, .pf select { padding: 3px 6px; border-radius: 6px; height: 28px; }
.pf input[name=initials] { width: 2.9em; text-align: center; font-weight: 700; padding: 3px 2px; }
.pf input[name=name], .pf input[name=login] { flex: 1 1 6.5em; min-width: 5.5em; width: 6.5em; }
.pf select { padding-right: 2px; } .roletxt { font-size: .84rem; color: var(--muted); padding: 0 4px; }
.mini { display: flex; flex-direction: row; align-items: center; gap: 3px; font-size: .74rem; white-space: nowrap; }
.mini input[type=number] { width: 2.7em; padding: 3px 2px; text-align: center; }
.mini input[type=checkbox] { width: 15px; height: 15px; margin: 0; }
.btn.tiny { padding: 3px 8px; font-size: .78rem; border-radius: 6px; line-height: 1.3; }
.pmeta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .76rem; }
.pmeta .pill { padding: 0 7px; font-size: .72rem; }
@media (max-width: 640px) {
  .pf input, .pf select { height: 32px; } .person { padding: 6px 0; }
  .person .btn.tiny, .addp .btn.tiny { padding: 5px 9px; }
}
@media (min-width: 641px) { .pf input, .pf select { font-size: .88rem; } .pf { flex-basis: 430px; } }

.clockbtn:disabled { background: var(--offbg); color: var(--offink); cursor: not-allowed; }
.clockhint { margin: 6px 0 0; text-align: center; }

/* ---- compact layout everywhere: less padding, tighter rows ---- */
body { font-size: 14px; line-height: 1.35; }
h1 { font-size: 1.12rem; margin: 0 0 .35rem; } h2 { font-size: .96rem; margin: 0 0 .35rem; }
.top { padding: 4px 12px; gap: 10px; } .nav a { padding: 5px 9px; }
main { padding: 10px; }
.card { padding: 10px 12px; margin: 0 0 8px; border-radius: 10px; }
.card.narrow { padding: 16px; }
details.card[open] > summary { margin-bottom: 7px; }
.flash { padding: 6px 10px; margin: 0 0 6px; border-radius: 8px; }
.stack { gap: 7px; } .row { gap: 6px; } label { gap: 2px; font-size: .8rem; }
input, select, textarea { padding: 4px 7px; border-radius: 6px; }
input[type=color] { width: 36px; height: 28px; } input[type=checkbox] { width: 16px; height: 16px; }
fieldset { padding: 6px 8px; border-radius: 8px; }
.btn { padding: 5px 10px; border-radius: 7px; } .btn.small { padding: 3px 8px; font-size: .8rem; }
.pill { padding: 1px 8px; font-size: .74rem; }
.bar { margin-bottom: 6px; gap: 6px; } .actions { gap: 5px; margin-bottom: 8px; }
.gridwrap { border-radius: 10px; }
.grid th, .grid td { padding: 2px; } .grid thead th { padding: 4px 2px; font-size: .76rem; } .grid thead th small { font-size: .92rem; }
.grid th.namecol { padding: 3px 8px; }
.cell { min-height: 34px; border-radius: 7px; padding: 1px; }
.hint { font-size: .62rem; margin-top: 1px; }
.grid .sum small { font-size: .68rem; } .grid td.cover { font-size: .8rem; }
.legend { gap: 3px 12px; margin: 6px 2px 8px; }
.needs th, .needs td { padding: 2px 4px; } .needs input { padding: 3px 4px; width: 3.2em; }
dialog { padding: 12px; border-radius: 12px; } .choices { gap: 6px; } .choice { padding: 5px; border-radius: 8px; } .choice b { padding: 4px; min-width: 30px; }
.list th, .list td { padding: 4px 6px; } .list th { font-size: .74rem; }
.list.totals td, .list.totals th { padding: 4px 6px; }
.clock { gap: 10px; } .clock .big { font-size: 1.05rem; margin: 2px 0; } .clock p { margin: 2px 0; }
.clockbtn { font-size: 1rem; padding: 11px 20px; border-radius: 10px; }
ul.shifts, ul.threads { margin: 0 0 6px; }
.shifts li { padding: 5px 4px; gap: 8px; } .threads a { padding: 6px 4px; gap: 8px; }
.kpis { gap: 8px; margin-bottom: 6px; } .kpis div { padding: 6px 12px; }
.notices p { margin: 0 0 3px; }
.req { padding: 6px 0; gap: 8px; } .quote { margin: 2px 0; }
.chat .msg { padding: 5px 10px; margin: 0 0 5px; border-radius: 10px; } .chat .send { margin-top: 8px; }
.ann { padding: 6px 0; margin-top: 6px; } .announce .body { font-size: 1rem; margin: 2px 0 5px; }
.quick { margin: 0 0 7px; gap: 5px; }
.biglogo { margin-bottom: 8px; }
p { margin: 0 0 6px; }

@media (max-width: 640px) {
  body { font-size: 15px; padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  main { padding: 7px; } .top { padding: 4px 8px; }
  .card { padding: 9px 10px; margin: 0 0 7px; }
  input, select, textarea { padding: 5px 7px; }  /* text stays 16px so iPhones do not zoom */
  .btn { padding: 7px 10px; } .btn.small { padding: 5px 9px; }
  .nav { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .nav > a, .morebtn { padding: 8px 2px; }
  .moremenu { bottom: calc(48px + env(safe-area-inset-bottom)); } .moremenu a { padding: 10px 12px; }
  .grid th, .grid td { padding: 1px; } .grid thead th { padding: 3px 0; }
  .cell { min-height: 36px; }
  .actions .btn { padding: 7px 3px; }
  .clockbtn { padding: 13px 20px; }
  .list th, .list td { padding: 4px 4px; }
  dialog { padding: 10px; }
}

.typef { padding: 4px 0; border-bottom: 1px solid var(--line); flex-basis: auto; } .typef.new { border-bottom: 0; }
.typef.inactive { opacity: .55; }
.typef input[name=code] { width: 4.2em; font-weight: 700; text-align: center; }
.typef input[type=time] { width: 6.6em; padding: 3px 4px; } .typef input[type=color] { width: 30px; height: 26px; padding: 1px; }
@media (max-width: 640px) {
  .needs input { width: 2.3em; padding: 4px 1px; text-align: center; } .needs th, .needs td { padding: 2px 1px; }
  .typef input[type=time] { width: 5.9em; }
  .list.logs input[type=datetime-local] { width: 11.5em; padding: 4px 3px; }
}

/* the menu as a tab bar on phones: every page visible, icon over a small label */
.nav .ic { display: none; font-style: normal; }
@media (max-width: 640px) {
  .nav { gap: 0; padding: 3px 2px calc(3px + env(safe-area-inset-bottom)); }
  .nav > a { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
             padding: 4px 0 3px; font-size: .6rem; letter-spacing: -.01em; line-height: 1.15; border-radius: 8px; }
  .nav > a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .ic { display: block; font-size: 1.15rem; line-height: 1.1; }
  .nav .badge { position: absolute; top: 1px; left: 50%; margin-left: 6px; font-size: .58rem; padding: 0 4px; line-height: 1.4; }
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

/* line icons in the café's own colours: they take the colour of the tab's text */
.nav svg.ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .nav svg.ic { display: block; width: 22px; height: 22px; }
  .nav > a { color: #b3bc88; } .nav > a.on { color: var(--brand); }
  :root[data-theme=dark] .nav > a.on { color: #1c2110; }
  .nav .badge { margin-left: 5px; }
}