:root { color-scheme: light dark; --accent: #2f6f4e; --line: color-mix(in srgb, CanvasText 20%, transparent); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-bottom: 8rem; } /* keep focused/scrolled-to elements clear of the sticky action bar */
body { margin: 0 auto; max-width: 34rem; padding: max(1rem, env(safe-area-inset-top)) 1rem 0;
       font: 17px/1.4 system-ui, -apple-system, sans-serif; background: Canvas; color: CanvasText;
       min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
section { flex: 1; display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
h1 { font-size: 1.3rem; margin: 0; }
header button { font-size: 1.6rem; padding: 0 .6rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
button, .button, input, select, textarea { font: inherit; min-height: 44px; border-radius: 10px; }
button, .button { border: 1px solid var(--line); background: color-mix(in srgb, CanvasText 6%, Canvas); color: inherit;
                  padding: .4rem 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button:disabled { opacity: .5; }
.primary { background: var(--accent); color: #fff; border: 0; width: 100%; font-weight: 600; margin-top: 1rem; }
.danger { color: #c0392b; }
.wide { width: 100%; margin-top: .75rem; }
.child { border: 2px solid var(--accent); border-radius: 14px; padding: 0 1rem 1rem; margin-top: 1rem; }
input:not([type=checkbox]), textarea, select { border: 1px solid var(--line); padding: .4rem .6rem; width: 100%; background: Canvas; color: inherit; }
textarea { resize: vertical; }
input[type=checkbox] { width: 1.4rem; height: 1.4rem; min-height: 0; accent-color: var(--accent); margin: 0; }
label { display: block; margin: .6rem 0; }
button.link { border: 0; background: none; min-height: 0; padding: .2rem 0; text-decoration: underline; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: .6rem 0; }
fieldset label, .check { display: flex; align-items: center; gap: .6rem; }
.hint { font-size: .9rem; opacity: .75; }
.warn { color: #b35c00; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }

profile-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
profile-tabs button[aria-pressed=true] { background: var(--accent); color: #fff; }

/* action bar: pushed to the screen bottom, stays visible while the content scrolls */
.actions { margin-top: auto; position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .5rem; background: Canvas;
           padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.actions > * { flex: 1 1 0; margin: 0; }
.actions > .result { flex-basis: 100%; }
.result > * { flex: 1; }

date-time-field { display: block; margin: .6rem 0; }
.dt-show { width: 100%; justify-content: flex-start; background: Canvas; }
.dt-show.empty { color: color-mix(in srgb, CanvasText 55%, transparent); }
.dt h3 { margin: 1rem 0 .4rem; }
.dt-heading { margin: 0 0 .5rem; font-size: 1.3rem; color: var(--accent); }
.dt-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dt-head button { font-size: 1.4rem; padding: 0; width: 44px; }
.dt-title { display: flex; align-items: center; gap: .4rem; }
.dt-title select { width: auto; min-height: 40px; padding: .2rem .4rem; }
.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; margin-top: .4rem; text-align: center; }
.dt-grid small { opacity: .6; }
.dt-grid button, .dt-grid span { padding: 0; min-height: 40px; font-variant-numeric: tabular-nums; }
.dt-clock { display: flex; align-items: center; gap: .4rem; }
.dt-clock input { width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.dt-clock button { margin-left: auto; }
.dt-today { font-weight: 700; text-decoration: underline; }
.dt-marked { border: 2px solid var(--accent); }
.dt button[aria-pressed=true] { background: var(--accent); color: #fff; }
.dt > .row { margin-top: 1rem; }
.dt > .row button { flex: 1; margin: 0; width: auto; }

sig-field, sig-toggle { display: block; }
sig-field img { display: block; max-width: 100%; max-height: 80px; background: #fff; border-radius: 6px; padding: 4px; }
dialog { border: 0; border-radius: 14px; max-width: 32rem; width: calc(100% - 2rem); background: Canvas; color: CanvasText; }
dialog::backdrop { background: rgb(0 0 0 / .4); }
#pad { width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1px solid var(--line); border-radius: 8px; touch-action: none; }
#toast { position: fixed; left: 1rem; right: 1rem; top: max(1rem, env(safe-area-inset-top)); max-width: 32rem; margin: auto; padding: .5rem 1rem;
         background: CanvasText; color: Canvas; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; }