/* Routing page for Kasaneru support: three tappable cards on top of the legal
   shell. Loaded after legal.css, which supplies every token used here.

   The cards are anchors rather than buttons because that is what they are —
   each one leaves for a different Google Form. Making the whole card the link
   keeps the tap target far above the 44px minimum on a phone, which matters:
   most people reaching this page arrived from inside the app. */

.lede {
    font-size: 15.5px;
    margin-top: 18px;
}

/* legal.css balances the h1, which on a Japanese phrase means breaking it
   wherever it likes — here it stranded the final 「か」 on its own line, turning
   a question into two fragments. Japanese has no spaces to break on politely,
   so this phrase is kept whole and only the English gloss is allowed to wrap. */
.t-ja { white-space: nowrap; }

.choices {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: grid;
    gap: 12px;
}

.choices li {
    padding-left: 0;
    margin-bottom: 0;
}

/* legal.css draws a dash before every <li>; a card does not want one. */
.choices li::before { content: none; }

.choice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 18px;
    align-items: start;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--text);
    text-decoration: none;
    transition:
        border-color 0.25s var(--ease),
        box-shadow 0.25s var(--ease);
}

/* legal.css fades every link on hover; a whole card fading reads as disabled. */
.choice:hover {
    opacity: 1;
    border-color: var(--text);
    box-shadow: 0 2px 0 var(--rule-soft);
}

.choice-n {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    color: var(--text-mute);
    padding-top: 0.55em;
}

.choice-t {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.choice-t-en {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--text-mute);
    margin-top: 2px;
}

.choice-d {
    display: block;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-sub);
    margin-top: 10px;
}

.choice-d-en {
    display: block;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-mute);
    margin-top: 5px;
}

/* A mono glyph rather than an icon, to stay inside the type system already on
   the page. It shifts on hover so the card reads as going somewhere. */
.choice-go {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-mute);
    padding-top: 0.3em;
    transition:
        transform 0.25s var(--ease),
        color 0.25s var(--ease);
}

.choice:hover .choice-go {
    transform: translateX(3px);
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    .choice,
    .choice-go { transition: none; }
    .choice:hover .choice-go { transform: none; }
}

@media (max-width: 640px) {
    .choice {
        padding: 17px 16px;
        column-gap: 13px;
    }
    .choice-t { font-size: 15.5px; }
}

/* ─── Print ───
   legal.css already strips the interface for print. A routing page printed on
   paper is useless without the destinations spelled out, and legal.css only
   does that inside its own rules, so repeat it for the cards. */
@media print {
    .choice {
        border: 1pt solid #999;
        box-shadow: none;
        break-inside: avoid-page;
    }
    .choice-go { display: none; }
}