:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #526057;
  --brand: #176b3a;
  --brand-dark: #0f4e2a;
  --canvas: #f3f6f1;
  --surface: #ffffff;
  --line: #d8e1d9;
  --danger: #a12727;
}

* { box-sizing: border-box; }

/* Japanese line breaking. `strict` is what keeps 「ー」, small kana and
   repetition marks off the head of a line; `auto` leaves it to the browser and
   they land there. `word-break: normal` is stated rather than assumed, because
   `break-all` — the reflex fix for an overflowing box — turns all of this off.
   A long unbroken URL is handled where it appears, not by loosening the page. */
:lang(ja), body {
  line-break: strict;
  /* Two declarations of one property, on purpose: a browser that does not know
     `auto-phrase` keeps `normal`, and one that does breaks on phrase
     boundaries instead of mid-word — 匿／名 and アカウン／ト are what the
     default leaves behind. Never `break-all`, which turns the prohibitions off
     entirely. */
  word-break: normal;
  word-break: auto-phrase;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  line-height: 1.75;
}

a { color: var(--brand-dark); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #e5a50a; outline-offset: 3px; }

header, main, footer { width: min(100% - 2rem, 52rem); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; }
.brand { color: var(--brand); font-size: 1.35rem; font-weight: 850; letter-spacing: -.03em; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .9rem; }
main { padding-block: 3rem 5rem; }
.hero { padding-block: 4rem; }
h1 { max-width: 18em; margin: 0 0 1rem; font-size: clamp(2rem, 7vw, 3.7rem); letter-spacing: -.045em; line-height: 1.15; }
h2 { margin-top: 2.5rem; font-size: 1.35rem; line-height: 1.4; }
p, li { max-width: 46rem; }
.lede { color: var(--muted); font-size: 1.08rem; }
.card { margin-top: 1.5rem; padding: clamp(1.25rem, 4vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 16px 42px rgba(19, 53, 29, .07); }
.notice { padding: 1rem 1.2rem; border-left: .3rem solid var(--brand); background: #e8f3eb; }
.danger { border-left-color: var(--danger); background: #faeaea; }
label { display: block; margin-top: 1.15rem; font-weight: 700; }
input { width: 100%; min-height: 3rem; margin-top: .4rem; padding: .7rem .8rem; border: 1px solid #87958a; border-radius: .65rem; font: inherit; }
/* `overflow-wrap: anywhere` is the release valve for `word-break: auto-phrase`.
   Phrase breaking treats 「サインアウト」 as one unbreakable unit, so at a large
   default font size the label's minimum width exceeds the card and the row
   scrolls sideways. `anywhere` only takes effect when the label would otherwise
   overflow, and it still breaks under `line-break: strict`, so 禁則 holds. It is
   not `break-all`: nothing changes at ordinary sizes. Shortening the labels was
   the other option and there is nothing left to cut from six characters, and
   the padding is not available to take it out of. */
button { min-height: 3rem; margin-top: 1rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: var(--brand); color: white; font: inherit; font-weight: 750; cursor: pointer; overflow-wrap: anywhere; }
button:hover { background: var(--brand-dark); }
button:disabled { opacity: .5; cursor: not-allowed; }
.secondary { background: transparent; color: var(--brand-dark); border: 1px solid var(--brand); }
.status { min-height: 1.75rem; margin-top: 1rem; font-weight: 650; }
.muted { color: var(--muted); }
.disclosure-list { margin: 0; }
.disclosure-list div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--line); }
.disclosure-list div:first-child { border-top: 0; }
.disclosure-list dt { font-weight: 750; }
.disclosure-list dd { margin: 0; }
select { width: 100%; min-height: 3rem; margin-top: .4rem; padding: .7rem .8rem; border: 1px solid #87958a; border-radius: .65rem; background: var(--surface); font: inherit; }
.request h3, .empty h3 { margin-top: 0; }
.empty { text-align: center; }
.empty p { margin-inline: auto; }
.request .kind { margin-block: .2rem 1rem; }
.request .decisions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* The unread mark. Its box holds two characters, so the padding is set in em
   and sized against them rather than at a flat one-character minimum, and the
   label never wraps. The tracking that separates 新 and 着 also lands after
   着, which would push the text left inside the box; `text-indent` puts back
   the same amount on the other side so the two margins read as equal. */
.request .badge {
  display: inline-block;
  margin-inline-end: .5em;
  padding: .16em .7em;
  border-radius: .5em;
  background: var(--brand);
  color: #fff;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .08em;
  text-indent: .08em;
  white-space: nowrap;
  vertical-align: .1em;
}
.request.fresh { border-color: var(--brand); }
footer { border-top: 1px solid var(--line); padding-block: 2rem 3rem; color: var(--muted); font-size: .9rem; }
footer nav { margin-top: .7rem; }
@media (max-width: 38rem) { header { align-items: flex-start; flex-direction: column; gap: .7rem; } main { padding-top: 1.5rem; } .disclosure-list div { grid-template-columns: 1fr; gap: .2rem; } }