/* Mechanics shared by every direction. Each direction sets the tokens. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }

.mockbar { display: flex; gap: 16px; align-items: center; min-height: 32px; padding: 0 16px; background: #111; color: #bbb; font: 12px/1.3 system-ui, sans-serif; flex-wrap: wrap; }
.mockbar a { color: #fff; }
.mockbar span:last-child { margin-left: auto; }

.ph { display: grid; gap: 12px; margin: 8px 0 24px; }
.ph i { display: block; height: .7em; border-radius: 3px; background: var(--ph, #e7e1d6); }
.ph i:nth-child(4n) { width: 70%; }
.ph i:nth-child(5n) { width: 86%; }

dialog.sub { border: 0; padding: 36px 32px 32px; width: min(420px, calc(100% - 32px)); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.3); border-radius: var(--r, 4px); }
dialog.sub::backdrop { background: rgba(15,15,15,.55); }
dialog.sub[open] { animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
dialog.sub h2 { margin: 0 0 6px; font: var(--h-font); font-size: 30px; }
dialog.sub p { margin: 0 0 20px; color: var(--muted); }
dialog.sub form { display: grid; gap: 14px; }
dialog.sub .x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; }

label { display: grid; gap: 6px; font: 600 13px/1.2 var(--ui); letter-spacing: .02em; }
input, textarea { font: 16px/1.4 var(--ui); padding: 12px 14px; border: 1px solid var(--line); background: var(--field, #fff); color: var(--ink); border-radius: var(--r, 4px); width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button[type=submit], dialog.sub [data-s=done] button { justify-self: start; font: 600 15px/1 var(--ui); padding: 13px 22px; border: 0; background: var(--accent); color: var(--on-accent, #fff); border-radius: var(--r, 4px); cursor: pointer; }

.comments h2 { font: var(--h-font); font-size: 26px; margin: 0 0 16px; }
.c { padding: 16px 0; border-top: 1px solid var(--line); }
.c small { color: var(--muted); }
.c p { margin: 6px 0 0; }
.c-empty { color: var(--muted); }
.c-form { display: grid; gap: 14px; margin-top: 20px; }
.c-note { margin: 0; padding: 12px 14px; background: var(--note, #f3ead8); border-radius: var(--r, 4px); font: 15px var(--ui); }

@media (prefers-reduced-motion: reduce) { dialog.sub[open] { animation: none; } html { scroll-behavior: auto !important; } }