/* The Geneva Walk: Canada — additions to /styles.css, in the same language
   (DESIGN.md): square corners, hairlines, red only for breach. */
.topbar .control.icon{min-width:44px;padding-left:8px;padding-right:8px}
.progress-track{position:fixed;top:var(--topbar);left:0;right:0;height:18px;z-index:42;cursor:pointer;touch-action:none}
.progress{pointer-events:none;height:3px}

.force-record{list-style:none;margin:18px 0;padding:0;border-top:1px solid var(--line)}
.force-record li{padding:12px 0 12px 12px;border-bottom:1px solid var(--line);border-left:3px solid var(--blood)}
.force-record .when{display:block;font:700 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.force-record p{margin:0 0 4px}
.force-record .src{font:400 12.5px/1.45 var(--mono)}
.force-record .src a{text-decoration:none;overflow-wrap:anywhere}

.acts-list{display:grid;gap:12px;margin:18px 0}
.act{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blood);padding:14px 16px;min-width:0}
.act .act-k{font:700 11px/1.3 var(--mono);letter-spacing:.14em;color:var(--blood);margin:0 0 6px}
.act h3{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.15;letter-spacing:-.015em;margin:0 0 8px}
.act p{margin:0 0 8px}
.act .src{font:400 12.5px/1.45 var(--mono)}
.act .src a{text-decoration:none;overflow-wrap:anywhere}
.act .open-art{margin-top:6px}

.owed{list-style:none;margin:18px 0;padding:0;border-top:1px solid var(--line)}
.owed li{position:relative;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--blood);padding:14px 16px;margin:0 0 10px;min-width:0}
.owed .ow-art{font:700 11px/1.3 var(--mono);letter-spacing:.12em;color:var(--un);margin:0 0 4px}
.owed h3{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.15;letter-spacing:-.015em;margin:0 0 8px;max-width:22ch}
.owed dl{margin:0}
.owed dl>div{display:grid;grid-template-columns:1fr;gap:2px;padding:6px 0;border-top:1px solid var(--line)}
.owed dt{font:700 10px/1.3 var(--mono);letter-spacing:.13em;color:var(--muted)}
.owed dd{margin:0}
.owed .stamp{position:absolute;top:10px;right:10px;transform:rotate(7deg);opacity:.86;border:2px solid var(--blood);box-shadow:inset 0 0 0 2px var(--panel),inset 0 0 0 3px var(--blood);color:var(--blood);font:700 10px/1 var(--mono);letter-spacing:.14em;padding:6px 8px;background:var(--panel)}
@media (min-width:700px){.owed dl>div{grid-template-columns:150px 1fr;gap:14px}}

.compose{background:#EAF1F9;border-top:3px solid var(--un)}
.cmp-form{display:grid;gap:8px;margin:16px 0}
@media (min-width:700px){.cmp-form{grid-template-columns:1fr 1fr auto}}
.cmp-form input{font-size:16px;padding:12px;border:1px solid #C3BBA9;background:var(--panel);border-radius:0;min-width:0;color:var(--fg)}
.cmp-go,.rep-go{background:var(--un);color:var(--bg);border:1px solid var(--un);padding:12px 16px;font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.rep-ghost{background:var(--panel);color:var(--un)}
.cmp-error{color:var(--blood);font:700 13px/1.4 var(--mono)}
.reps{display:grid;gap:8px;margin:0 0 14px}
.reps-head{font:700 10px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.rep{background:var(--panel);border:1px solid #C3BBA9;padding:12px 14px;min-width:0}
.rep-tier{font:700 10px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.rep-name{font:400 17px/1.2 var(--display);margin:0 0 4px}
.rep-meta{font:400 12.5px/1.4 var(--mono);color:var(--muted);margin:0 0 10px}
.cmp-letter{background:var(--panel);border:1px solid #C3BBA9;margin:0 0 14px}
.cmp-letter summary{cursor:pointer;padding:13px 14px;font:700 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--un)}
.cmp-text{white-space:pre-wrap;font:400 13.5px/1.6 var(--mono);margin:0;padding:0 14px 14px;overflow-wrap:anywhere}
.cmp-acts{padding:0 14px 14px}
.cite{background:var(--panel);border:1px solid #C3BBA9;color:var(--un);font:700 12.5px/1 var(--mono);padding:10px 12px;cursor:pointer;min-height:40px}
.cmp-fine{font:400 12.5px/1.5 var(--mono);color:var(--muted)}
/* five transport controls must fit a 360px phone without clipping */
.topbar-row.player{gap:5px;padding-left:8px;padding-right:8px}
.topbar-row.player .control{padding-left:8px;padding-right:8px;font-size:10.5px;letter-spacing:.08em;white-space:nowrap}
.topbar-row.player .control.icon{min-width:38px;padding-left:4px;padding-right:4px}
/* French headlines run longer: "COMPARAISON." must fit a 360px phone */
html[lang="fr-CA"] .hero h1{font-size:clamp(30px,9.4vw,80px)}