/* [eroge_monthly layout="calendar-v2"] — monthly release catalogue (D-055, finished in D-084 LIST).
 * Tokens and primitives: nuruma-ui.css + nuruma-foundation.css (type scale, .nu-frame, .nu-state, .nu-chip). Namespace .nrm-cal2.
 * Round 3 (information hub): hairline rows on the quiet ground instead of boxes, a small jacket, no filled button in a row (price and bonus routes are text links with an arrow),
 * the aubergine accent only on links and the one primary of the filter sheet. Dates, prices and counts are unbreakable tokens (nowrap) so a 320px line never splits a number.
 * Prices are dark, bold, tabular and never red; every state is written; images sit in a reserved frame (contain, never cropped).
 * Spacing 4/8/12/16/24/32 · radii 4/8/12 · nothing under 12px · every operated control is 44px on touch screens.
 * `.nrm-ui.nrm-ui` is used where nuruma-ui.css resets margin/padding/background of plain tags at that specificity. */
.nrm-cal2 { container-type: inline-size; --cal2-jw: var(--nu-img-thumb, 56px); }
/* Media scope: the chosen filter decides which server-computed variant is visible. */
.nrm-cal2:not([data-media="package"]):not([data-media="download"]) .nrm-cal2-v:not([data-scopes~="all"]),
.nrm-cal2[data-media="package"] .nrm-cal2-v:not([data-scopes~="package"]),
.nrm-cal2[data-media="download"] .nrm-cal2-v:not([data-scopes~="download"]),
.nrm-cal2[data-media="package"] .nrm-cal2-ed:not([data-media="package"]),
.nrm-cal2[data-media="download"] .nrm-cal2-ed:not([data-media="download"]),
.nrm-cal2[data-sort="date"] .nrm-cal2-rowdate { display: none; }

.nrm-cal2-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.nrm-cal2-left { display: none; }
.nrm-ui.nrm-ui .nrm-cal2-box { border: 0; border-top: 1px solid var(--nu-line); border-radius: 0; background: none; padding: 12px 0 0; margin-bottom: 16px; }
.nrm-ui.nrm-ui .nrm-cal2-box-title { font-size: var(--nu-fs-xs); font-weight: 700; color: var(--nu-sub); margin-bottom: 8px; }
/* Year select + 12-month grid (left column on PC, dialog on every width). */
.nrm-cal2-yearsel { display: block; font-size: var(--nu-fs-s); color: var(--nu-sub); }
.nrm-cal2-yearsel > span { display: block; margin-bottom: 4px; }
.nrm-cal2-yearsel select { width: 100%; }
.nrm-ui.nrm-ui .nrm-cal2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.nrm-ui.nrm-ui .nrm-cal2-mcell { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--nu-r-s); font-size: var(--nu-fs-s); color: var(--nu-text); border: 1px solid var(--nu-line); }
.nrm-ui.nrm-ui a.nrm-cal2-mcell:hover { background: var(--nu-accent-soft); text-decoration: none; }
.nrm-cal2-mcell.is-current { background: var(--nu-accent); border-color: var(--nu-btn-border); color: #fff !important; font-weight: 700; }
.nrm-cal2-mcell.is-disabled { color: var(--nu-muted) !important; background: var(--nu-bg); border-style: dashed; }
.nrm-ui.nrm-ui .nrm-cal2-dates a { display: flex; justify-content: space-between; min-height: 36px; align-items: center; padding: 0 4px; color: var(--nu-text); font-size: var(--nu-fs-s); border-top: 1px solid var(--nu-line-soft, var(--nu-line)); }
.nrm-ui.nrm-ui .nrm-cal2-dates li:first-child a { border-top: 0; }
.nrm-cal2-dates a span { color: var(--nu-sub); }
.nrm-cal2:not([data-sort="date"]) .nrm-cal2-jumps { display: none; }
.nrm-ui.nrm-ui .nrm-cal2-picker { width: min(92vw, 380px); padding: 16px; }
.nrm-cal2-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: var(--nu-fs-l); font-weight: 700; }
.nrm-cal2-picker-head .nu-btn { width: 44px; min-height: 44px; font-size: 20px; padding: 0; }

/* Header (D-084 round 2). One control grid in reading order: month navigation, search, media, order, conditions. The monthly page's own H1 names the
 * month, so on the page the H2 stays in the outline only; the month is written once, on the month button. The total is written once too: by the media
 * counts while nothing is applied (the sentence is then only read aloud), by the sentence once something is applied. */
.nrm-ui.nrm-ui.is-page .nrm-cal2-title, .nrm-ui.nrm-ui:not(.is-filtered) .nrm-cal2-total, .nrm-ui.nrm-ui.is-zero .nrm-cal2-total { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nrm-ui.nrm-ui .nrm-cal2-title { margin: 0 0 8px; font-size: var(--nu-fs-l); font-weight: 700; line-height: var(--nu-lh-tight); overflow-wrap: anywhere; }
.nrm-ui.nrm-ui .nrm-cal2-monthnav { grid-area: nav; display: flex; gap: 8px; min-width: 0; }
.nrm-cal2-monthnav .nu-btn { flex: 1 1 auto; min-width: 0; min-height: var(--nu-tap); padding: 8px; font-weight: 400; white-space: nowrap; }
.nrm-cal2-monthnav .nrm-cal2-pickbtn { flex-grow: 2; font-weight: 700; }
.nrm-cal2-monthnav .nu-btn.is-disabled { color: var(--nu-muted); }

/* Toolbar. Phones: month navigation, search (always visible), media, order + conditions. The conditions panel is a bottom sheet there. */
.nrm-ui.nrm-ui .nrm-cal2-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nav nav" "search search" "media media" "sort filter"; gap: 8px; }
.nrm-ui.nrm-ui .nrm-cal2-controls.is-navonly { grid-template-areas: "nav nav"; }
.nrm-cal2-search { grid-area: search; display: block; min-width: 0; }
.nrm-cal2-search input[type="search"] { min-height: var(--nu-tap); font-size: 16px; text-overflow: ellipsis; }
.nrm-cal2-search input[type="search"]::placeholder { color: var(--nu-sub); opacity: 1; }
.nrm-ui.nrm-ui .nrm-cal2-media { grid-area: media; display: flex; flex-wrap: wrap; width: 100%; overflow: visible; }
.nrm-ui.nrm-ui .nrm-cal2-media button { flex: 1 1 auto; min-width: 0; min-height: var(--nu-tap); padding: 6px 8px; font-size: var(--nu-fs-m); }
.nrm-cal2-sort { grid-area: sort; display: flex; align-items: center; gap: 8px; font-size: var(--nu-fs-s); color: var(--nu-sub); min-width: 0; }
.nrm-cal2-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nrm-cal2-sort select { min-height: var(--nu-tap); width: 100%; min-width: 0; color: var(--nu-text); font-size: 16px; }
.nrm-ui.nrm-ui .nrm-cal2-filterbtn { grid-area: filter; min-height: var(--nu-tap); font-size: var(--nu-fs-m); font-weight: 700; white-space: nowrap; }
.nrm-ui.nrm-ui .nrm-cal2-panel { display: none; }
.nrm-cal2.is-panel-open .nrm-cal2-panel { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; gap: 12px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--nu-surface); border-radius: var(--nu-r-l) var(--nu-r-l) 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.25); max-height: 80vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; }
.nrm-cal2.is-panel-open::before { content: ""; position: fixed; inset: 0; z-index: 99980; background: rgba(20,16,24,.45); }
/* No scroll behind the open sheet (the page behind it is also inert, see monthly-calendar.js); no layout shift where a scrollbar takes width. */
html:has(.nrm-cal2.is-panel-open) { overflow: hidden; scrollbar-gutter: stable; }
.nrm-ui.nrm-ui .nrm-cal2-panel-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--nu-fs-l); font-weight: 700; }
.nrm-cal2-panel-head .nu-btn { width: 44px; min-height: 44px; font-size: 20px; margin-left: auto; padding: 0; }
.nrm-ui.nrm-ui .nrm-cal2-checks { display: grid; gap: 0; }
/* 44px rows on phones; PC (mouse) 40px below */
.nrm-ui .nu-check.nrm-cal2-save { min-height: var(--nu-tap); }
.nrm-cal2-checks .nu-check { min-height: var(--nu-tap); border-top: 1px solid var(--nu-line); }
.nrm-cal2-checks .nu-check:first-child { border-top: 0; }
.nrm-ui.nrm-ui .nrm-cal2-panel-foot { display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--nu-surface); padding-top: 4px; }
.nrm-cal2-panel-foot .nu-btn { min-height: var(--nu-tap); font-size: var(--nu-fs-m); white-space: nowrap; }
.nrm-cal2-panel-foot .nrm-cal2-panel-done { flex: 1 1 auto; }
@container (max-width: 359px) {
	.nrm-ui.nrm-ui .nrm-cal2-panel-foot { flex-direction: column-reverse; }
}
/* Result sentence + applied conditions: both exist only while something is applied. The reset is a text action. */
.nrm-ui.nrm-ui .nrm-cal2-status { display: flex; align-items: center; justify-content: space-between; gap: 0 16px; margin: 0; }
.nrm-ui.nrm-ui.is-applied .nrm-cal2-status { margin-top: 4px; min-height: var(--nu-tap); }
.nrm-ui.nrm-ui.is-zero .nrm-cal2-status { margin-top: 0; min-height: 0; }
.nrm-ui.nrm-ui.is-zero .nrm-cal2-reset-inline { display: none; }
.nrm-cal2-total { font-size: var(--nu-fs-m); font-weight: 700; font-variant-numeric: tabular-nums; }
.nrm-ui .nrm-cal2-reset-inline { min-height: var(--nu-tap); padding: 0 4px; font-size: var(--nu-fs-s); }
.nrm-ui.nrm-ui .nrm-cal2-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; padding-bottom: 4px; }
.nrm-ui .nrm-cal2-chipx { cursor: pointer; font-family: inherit; }
.nrm-cal2-sortnote, .nrm-cal2-note { font-size: var(--nu-fs-s); color: var(--nu-sub); margin-top: 8px; }
.nrm-cal2-colhead { display: none; }
/* Display options inside the panel. */
.nrm-ui.nrm-ui .nrm-cal2-prefs { display: grid; gap: 8px; }
.nrm-ui.nrm-ui .nrm-cal2-density button { min-height: var(--nu-tap); padding: 6px 16px; font-size: var(--nu-fs-m); }
.nrm-ui.nrm-ui .nrm-cal2-savenote { font-size: var(--nu-fs-s); color: var(--nu-sub); }
.nrm-cal2-prefs-t { font-size: var(--nu-fs-s); color: var(--nu-sub); }

/* Date groups: a quiet band; the weekday is part of the date and the count is written once. */
.nrm-ui.nrm-ui .nrm-cal2-day { margin-top: 24px; scroll-margin-top: 96px; }
.nrm-ui.nrm-ui .nrm-cal2-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; font-size: var(--nu-fs-m); font-weight: var(--nu-fw-title, 700); line-height: var(--nu-lh-tight); padding: 4px 0 8px; background: none; color: var(--nu-text); border-radius: 0; border-bottom: 1px solid var(--nu-line); font-variant-numeric: tabular-nums; }
.nrm-cal2-daycount { font-size: var(--nu-fs-s); font-weight: 400; color: var(--nu-sub); }
.nrm-ui.nrm-ui .nrm-cal2-flat { margin-top: 12px; border-top: 1px solid var(--nu-line); }

/* Row anatomy (fixed, baseline-stable): small jacket frame · title (2 lines) · brand + editions · headline price · bonus · two text links (price / bonus compare, review).
 * Phones: jacket beside one text stack (title, meta, price); the bonus strip and the action (with the review link when both fit) under the whole row, left-aligned. From 320px of list width the
 * bonus count and thumbnail sit beside the price instead of under it. */
.nrm-ui.nrm-ui .nrm-cal2-row { display: grid; grid-template-columns: var(--cal2-jw) minmax(0, 1fr); grid-template-areas: "jacket info" "jacket price" "bonus bonus" "go go" "more more"; column-gap: 12px; row-gap: 0; padding: 12px 0; border-bottom: 1px solid var(--nu-line-soft, var(--nu-line)); background: none; }
.nrm-cal2-jacket { grid-area: jacket; align-self: start; display: block; width: var(--cal2-jw); }
.nrm-cal2-jacket .nu-frame { width: 100%; }
/* A frame never enlarges a small image (no blur) and never crops a large one: the image is centred at its own size, capped to the frame. */
.nrm-ui.nrm-ui .nu-frame.nrm-cal2-frame > img, .nrm-ui.nrm-ui .nu-frame.nrm-cal2-thumb > img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; }
.nrm-ui .nrm-cal2-frame.is-img-failed::after, .nrm-ui .nrm-cal2-thumb.is-img-failed::after { white-space: pre-line; padding: 4px; line-height: 1.35; }
.nrm-ui .nrm-cal2-thumb.is-img-failed::after { padding: 2px; line-height: 1.25; }
.nrm-ui .nrm-cal2-nojacket { padding: 4px; }
.nrm-cal2-info { grid-area: info; min-width: 0; }
.nrm-cal2-rowdate { font-size: var(--nu-fs-s); font-weight: 700; color: var(--nu-sub); font-variant-numeric: tabular-nums; }
.nrm-ui.nrm-ui .nrm-cal2-name { font-size: var(--nu-fs-m); font-weight: var(--nu-fw-title, 700); line-height: var(--nu-lh-tight); }
.nrm-ui.nrm-ui .nrm-cal2-name a { position: relative; z-index: 1; display: block; padding: 12px 0; margin: -12px 0; color: var(--nu-text); }
.nrm-ui.nrm-ui .nrm-cal2-name a:hover { color: var(--nu-accent-dark); text-decoration: underline; }
.nrm-cal2-nt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.nrm-ui.nrm-ui .nrm-cal2-meta { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 4px; font-size: var(--nu-fs-s); line-height: 1.5; }
.nrm-cal2-brand { flex: 0 1 auto; max-width: 100%; min-width: 0; color: var(--nu-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrm-cal2-media { font-size: var(--nu-fs-s); color: var(--nu-sub); }
/* 「パッケージ2種」 / 「DL1種」 are counted tokens: the line may end after the 「・」, never between the kind and its number. Brand and title wrap anywhere as before. */
.nrm-cal2-media.nrm-cal2-v { word-break: keep-all; font-variant-numeric: tabular-nums; }
/* Vertical rhythm comes from margins of the blocks that have content, so a row without a bonus has no empty gap. */
.nrm-cal2-price { grid-area: price; min-width: 0; margin-top: 8px; }
.nrm-cal2-price .nrm-cal2-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.nrm-cal2-cheapest { order: 1; flex: 1 1 100%; font-size: var(--nu-fs-xl); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--nu-text); }
.nrm-cal2-cheapest b, .nrm-cal2-cheapest small { }
.nrm-cal2-cheapest b { font-weight: 700; }
.nrm-cal2-cheapest small { margin-left: 4px; font-size: var(--nu-fs-xs); font-weight: 400; color: var(--nu-sub); }
/* After a cached page expires its price in place (nuruma-ui.js replaces the text and drops data-money-until) the line is a plain sentence, not a price. */
.nrm-cal2-cheapest:not([data-money-until]) { font-size: var(--nu-fs-s); font-weight: 400; color: var(--nu-sub); }
.nrm-cal2-cheapest.is-unknown { font-size: var(--nu-fs-m); font-weight: 400; color: var(--nu-sub); }
.nrm-cal2-cheapest.is-old, .nrm-cal2-cheapest.is-stockunknown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: var(--nu-fs-l); font-weight: 600; color: var(--nu-sub); }
.nrm-cal2-cheapest.is-old small, .nrm-cal2-cheapest.is-stockunknown small { margin: 0; }
.nrm-cal2-cheapest.is-old small:first-child, .nrm-cal2-cheapest.is-stockunknown small:first-child { flex-basis: 100%; font-weight: 700; color: var(--nu-text); }
.nrm-cal2-plabel { order: 2; flex: 0 1 auto; max-width: 100%; font-size: var(--nu-fs-s); color: var(--nu-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrm-cal2-shops { order: 3; font-size: var(--nu-fs-s); color: var(--nu-sub); font-variant-numeric: tabular-nums; }
.nrm-cal2-bonus { grid-area: bonus; min-width: 0; }
.nrm-cal2-bonus .nrm-cal2-v:not(:empty) { margin-top: 8px; }
.nrm-cal2-bonus .nrm-cal2-thumbs { flex-wrap: wrap; }
.nrm-cal2-bonus .nrm-cal2-v { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.nrm-cal2-bonuscount { font-size: var(--nu-fs-s); font-weight: 700; color: var(--nu-text); font-variant-numeric: tabular-nums; }
.nrm-cal2-tok { display: inline-block; }
/* Never researched: written as unknown (「店舗特典：調査中」), quieter than a known count; the break may fall after the colon. */
.nrm-cal2-bonuscount.is-unk { font-weight: 400; color: var(--nu-sub); }
/* Two copies of the same words, one displayed: after the shops line of the price block while the list is narrower than 320px (a flex line: no extra height when it fits),
 * in the bonus column from 320px. */
.nrm-cal2-unk-col { display: none; }
.nrm-cal2-bonus .nrm-cal2-v:has(.nrm-cal2-unk-col) { margin-top: 0; }
.nrm-cal2-price .nrm-cal2-unk-inline { order: 4; margin: 0; font-size: var(--nu-fs-s); }
@container (min-width: 320px) {
	.nrm-cal2-unk-inline { display: none; }
	.nrm-cal2-unk-col { display: block; }
	.nrm-cal2-bonus .nrm-cal2-v:has(.nrm-cal2-unk-col) { margin-top: 4px; }
}
.nrm-cal2-thumbs { display: flex; gap: 8px; }
.nrm-ui .nrm-cal2-thumb { flex: 0 0 auto; width: 56px; height: 44px; aspect-ratio: auto; border-radius: var(--nu-r-s); }
.nrm-ui.nrm-ui .nrm-cal2-thumb:nth-child(n+2) { display: none; }
.nrm-ui.nrm-ui .nrm-cal2-go { grid-area: go; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 8px; }
.nrm-ui.nrm-ui .nrm-cal2-go { column-gap: 12px; }
.nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-detail { flex: 0 0 auto; max-width: 100%; min-height: var(--nu-tap); font-size: var(--nu-fs-m); text-align: left; }
.nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-review { flex: 0 0 auto; min-height: var(--nu-tap); font-size: var(--nu-fs-m); }
.nrm-ui.nrm-ui .nrm-cal2-rvlist { flex-basis: 100%; padding: 0 0 4px 12px; border-left: 1px solid var(--nu-line); }
.nrm-ui.nrm-ui .nrm-cal2-rvlist a { display: inline-flex; min-height: var(--nu-tap); align-items: center; }
.nrm-ui.nrm-ui .nrm-cal2-more { grid-area: more; margin-top: 4px; padding: 4px 0 4px 12px; background: none; border-left: 1px solid var(--nu-line); border-radius: 0; font-size: var(--nu-fs-s); }
.nrm-ui.nrm-ui .nrm-cal2-ed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 0; border-top: 1px solid var(--nu-line-soft, var(--nu-line)); }
.nrm-ui.nrm-ui .nrm-cal2-ed:first-child { border-top: 0; }
.nrm-cal2-ed-label, .nrm-cal2-ed-price { font-weight: 700; }
.nrm-cal2-ed-price, .nrm-cal2-ed-date, .nrm-cal2-ed-shops, .nrm-cal2-ed-bonus { font-variant-numeric: tabular-nums; }
.nrm-cal2-ed-date, .nrm-cal2-ed-shops, .nrm-cal2-ed-bonus { color: var(--nu-sub); }
.nrm-ui.nrm-ui .nrm-cal2-ed-go { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--nu-tap); }
.nrm-ui.nrm-ui .nrm-cal2-more-none { margin: 0; color: var(--nu-sub); }
/* States: no result under the conditions / a month without works. */
/* nuruma-ui.css resets background / border / padding of every div inside .nrm-ui at (0,2,1), which beats the foundation .nu-state: restated here. */
.nrm-ui.nrm-ui .nrm-cal2-empty, .nrm-ui.nrm-ui .nrm-cal2-nomonth { margin-top: 16px; padding: 16px; background: var(--nu-bg); border: 1px solid var(--nu-line); border-radius: var(--nu-r); }
.nrm-ui.nrm-ui .nrm-cal2-empty[hidden] { display: none; }
.nrm-ui.nrm-ui .nrm-cal2-empty .nu-btn { min-height: var(--nu-tap); }
.nrm-ui.nrm-ui .nrm-cal2-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin-top: 24px; font-size: var(--nu-fs-s); }
.nrm-ui.nrm-ui .nrm-cal2-foot a { display: inline-flex; align-items: center; min-height: var(--nu-tap); font-weight: 700; }
.nrm-cal2-foot-next { margin-left: auto; }
.nrm-cal2-sortnote[hidden] { display: none; }

/* Compact density: fewer images and supporting lines, same title, price, purchase and review routes. */
.nrm-cal2[data-density="compact"] { --cal2-jw: 48px; }
.nrm-cal2[data-density="compact"] .nrm-cal2-thumbs, .nrm-cal2[data-density="compact"] .nrm-cal2-shops, .nrm-cal2[data-density="compact"] .nrm-cal2-media.nrm-cal2-v { display: none; }
.nrm-ui.nrm-ui .nrm-cal2[data-density="compact"] .nrm-cal2-row, .nrm-ui.nrm-ui.nrm-cal2[data-density="compact"] .nrm-cal2-row { padding-top: 12px; padding-bottom: 12px; }
.nrm-cal2[data-density="compact"] .nrm-cal2-price, .nrm-cal2[data-density="compact"] .nrm-cal2-bonus .nrm-cal2-v:not(:empty) { margin-top: 4px; }
.nrm-cal2[data-density="compact"] .nrm-cal2-go { margin-top: 8px; }
.nrm-cal2[data-density="compact"] .nrm-cal2-cheapest { font-size: var(--nu-fs-l); }

/* From 320px of list width: bonus count + thumbnail beside the price (one text block less per row). */
@container (min-width: 320px) {
	.nrm-ui.nrm-ui .nrm-cal2-row { grid-template-columns: var(--cal2-jw) minmax(0, 1fr) fit-content(96px); grid-template-areas: "jacket info info" "jacket price bonus" "go go go" "more more more"; }
}
/* A second bonus thumbnail needs width. */
@container (min-width: 460px) {
	.nrm-ui.nrm-ui .nrm-cal2-thumb:nth-child(2) { display: block; }
	.nrm-ui.nrm-ui .nrm-cal2-row { grid-template-columns: var(--cal2-jw) minmax(0, 1fr) fit-content(136px); }
}
/* >= 500px (a phone held sideways, a small tablet): two toolbar rows. Month navigation and search share the first, media, order and conditions the second. */
@container (min-width: 500px) {
	.nrm-ui.nrm-ui .nrm-cal2-controls { grid-template-columns: auto minmax(8.5em, 1fr) auto; grid-template-areas: "nav search search" "media sort filter"; }
	.nrm-ui.nrm-ui .nrm-cal2-controls.is-navonly { grid-template-areas: "nav nav nav"; }
	.nrm-cal2-monthnav .nu-btn { flex: 0 0 auto; padding: 8px 12px; }
	.nrm-cal2-sort { justify-content: flex-start; }
	.nrm-cal2-sort select, .nrm-cal2-search input[type="search"] { font-size: var(--nu-fs-m); }
	.nrm-cal2-sort select { width: auto; min-width: 0; max-width: 100%; }
	.nrm-ui.nrm-ui .nrm-cal2-media button { flex: 0 0 auto; padding: 6px 12px; }
	.nrm-cal2-media { width: auto; }
}
/* >= 640px: room for the visible 「並び順」 label (below it the select is named for assistive technology and shows its value). */
@container (min-width: 640px) {
	.nrm-cal2-sort > span { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap; }
	.nrm-cal2-monthnav .nu-btn { padding-left: 16px; padding-right: 16px; }
	.nrm-ui.nrm-ui .nrm-cal2-media button { padding-left: 16px; padding-right: 16px; }
}
/* >= 520px (a tablet, a phone held sideways): the action moves beside the text; price and bonus stay side by side. */
@container (min-width: 520px) {
	.nrm-ui.nrm-ui .nrm-cal2-row { grid-template-columns: var(--cal2-jw) minmax(0, 1fr) fit-content(88px) 184px; grid-template-areas: "jacket info info go" "jacket price bonus go" "more more more more"; }
	.nrm-ui.nrm-ui .nrm-cal2-thumb:nth-child(2) { display: none; }
	.nrm-ui.nrm-ui .nrm-cal2-go { align-self: center; margin-top: 0; flex-direction: column; align-items: flex-start; gap: 0; }
}
@container (min-width: 600px) {
	.nrm-ui.nrm-ui .nrm-cal2-row { grid-template-columns: var(--cal2-jw) minmax(0, 1fr) fit-content(136px) 184px; }
	.nrm-ui.nrm-ui .nrm-cal2-thumb:nth-child(2) { display: block; }
}
/* >= 700px: wider rows, bigger type for a visible title. */
@container (min-width: 700px) {
	.nrm-cal2 { --cal2-jw: var(--nu-img-thumb, 64px); }
	.nrm-cal2[data-density="compact"] { --cal2-jw: 48px; }
	.nrm-ui.nrm-ui .nrm-cal2-title { font-size: var(--nu-fs-h2); }
	.nrm-ui.nrm-ui .nrm-cal2-row { column-gap: 16px; padding: 12px 8px; align-items: start; }
	.nrm-ui.nrm-ui .nrm-cal2-row:hover { background: var(--nu-bg); }
	.nrm-ui.nrm-ui .nrm-cal2-name { font-size: var(--nu-fs-l); }
	.nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-review, .nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-detail { min-height: 40px; }
	.nrm-ui .nrm-cal2-thumb { width: 64px; height: 48px; }
	.nrm-ui.nrm-ui .nrm-cal2-more { margin-left: calc(var(--cal2-jw) + 16px); }
}
/* >= 700px on a screen taller than 500px: the conditions panel dissolves into the toolbar grid; the rows follow the reading order. A landscape phone keeps the phone controls (button + sheet) so the list is not pushed off screen. */
@container (min-width: 700px) {
	@media (min-height: 501px) {
		.nrm-ui.nrm-ui .nrm-cal2-controls { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nav search" "media sort" "checks checks" "prefs prefs"; align-items: center; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--nu-line); }
		.nrm-ui.nrm-ui .nrm-cal2-controls.is-navonly { grid-template-areas: "nav nav"; padding-bottom: 0; border-bottom: 0; }
		.nrm-ui.nrm-ui .nrm-cal2-search { justify-self: end; width: min(100%, 320px); }
		.nrm-ui.nrm-ui .nrm-cal2-media button { min-height: 40px; }
		.nrm-cal2-sort select { min-height: 40px; font-size: var(--nu-fs-m); }
		.nrm-cal2-search input[type="search"] { min-height: 40px; }
		.nrm-ui.nrm-ui .nrm-cal2-filterbtn, .nrm-ui.nrm-ui .nrm-cal2-panel-head, .nrm-ui.nrm-ui .nrm-cal2-panel-done, .nrm-ui.nrm-ui .nrm-cal2-panel-foot { display: none; }
		/* The panel dissolves: its conditions and display options sit in the toolbar grid. */
		.nrm-ui.nrm-ui .nrm-cal2-panel, .nrm-cal2.is-panel-open .nrm-cal2-panel { display: contents; }
		.nrm-cal2.is-panel-open::before { display: none; }
		.nrm-ui.nrm-ui .nrm-cal2-checks { grid-area: checks; display: flex; flex-wrap: wrap; gap: 0 24px; }
		.nrm-cal2-checks .nu-check { border-top: 0; min-height: 40px; }
		.nrm-ui.nrm-ui .nrm-cal2-prefs { grid-area: prefs; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
		.nrm-ui.nrm-ui .nrm-cal2-density button { min-height: 36px; padding: 4px 16px; font-size: var(--nu-fs-s); }
		.nrm-ui .nu-check.nrm-cal2-save { min-height: 40px; }
	}
}
/* >= 900px (PC): the two conditions join the media / order row. */
@container (min-width: 900px) {
	@media (min-height: 501px) {
		.nrm-ui.nrm-ui .nrm-cal2-controls { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nav search search" "media sort checks" "prefs prefs prefs"; }
		.nrm-ui.nrm-ui .nrm-cal2-controls.is-navonly { grid-template-areas: "nav nav nav"; }
	}
}
/* >= 1120px: the five aligned columns of the catalogue under a column header. */
@container (min-width: 1120px) {
	.nrm-ui.nrm-ui .nrm-cal2-row { grid-template-columns: var(--cal2-jw) minmax(0, 1fr) 176px 160px 184px; grid-template-areas: "jacket info price bonus go" "more more more more more"; align-items: center; }
	.nrm-cal2-bonus .nrm-cal2-v { flex-direction: column; align-items: flex-start; gap: 4px; }
	.nrm-cal2-price, .nrm-cal2-bonus .nrm-cal2-v:not(:empty), .nrm-cal2[data-density="compact"] .nrm-cal2-price, .nrm-cal2[data-density="compact"] .nrm-cal2-bonus .nrm-cal2-v:not(:empty) { margin-top: 0; }
	.nrm-ui.nrm-ui .nrm-cal2-colhead { display: grid; grid-template-columns: var(--cal2-jw) minmax(0, 1fr) 176px 160px 184px; column-gap: 16px; padding: 12px 8px 4px; font-size: var(--nu-fs-xs); color: var(--nu-sub); }
	.nrm-cal2-colhead span:first-child { grid-column: 1 / 3; }
}
/* Wide: year/month column on the left; the list keeps the rest. */
@container (min-width: 1000px) {
	.nrm-cal2-layout { grid-template-columns: 176px minmax(0, 1fr); }
	.nrm-cal2-left { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
	/* Reserved: a right rail returns only when highlights have a specification. */
	.nrm-cal2-layout.has-right { grid-template-columns: 176px minmax(0, 1fr) 220px; }
}
/* Touch screens (a phone, a tablet in either layout): every operated control reaches 44px. */
@media (pointer: coarse) {
	.nrm-cal2-sort select, .nrm-cal2-search input[type="search"], .nrm-ui.nrm-ui .nrm-cal2-media button, .nrm-ui.nrm-ui .nrm-cal2-density button, .nrm-cal2-checks .nu-check, .nrm-ui .nu-check.nrm-cal2-save, .nrm-cal2-yearsel select, .nrm-ui .nrm-cal2-empty .nu-btn, .nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-review { min-height: var(--nu-tap); }
	.nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-detail { min-height: var(--nu-tap); }
	.nrm-ui.nrm-ui .nrm-cal2-dates a { min-height: var(--nu-tap); }
}
@media (prefers-reduced-motion: reduce) { .nrm-cal2 * { transition: none !important; } }
/* The arrow after 「体験版レビュー」 is decoration: not part of the accessible name. */
.nrm-ui.nrm-ui .nrm-cal2-review.nu-link-arrow::after, .nrm-ui.nrm-ui .nrm-cal2-detail.nu-link-arrow::after { content: "→"; content: "→" / ""; flex: 0 0 auto; }
/* Focus never lands under a sticky theme header (keyboard, switch access, TalkBack swipe). */
html:has(.nrm-cal2) { scroll-padding-top: 72px; }
/* Short screens (a phone held sideways: 568×320, 667×375, 844×390): the toolbar is two rows (see the 500px tier), the rhythm is tighter, and the
 * conditions sheet stays within the screen: it scrolls inside itself, only its action bar is fixed to its bottom edge (one 44px row), and its
 * options are laid out in fewer, wider rows so little or nothing needs scrolling. */
@media (max-height: 500px) {
	.nrm-ui.nrm-ui .nrm-cal2-title { font-size: var(--nu-fs-m); margin-bottom: 4px; }
	.nrm-ui.nrm-ui .nrm-cal2-controls { gap: 4px 8px; }
	.nrm-ui.nrm-ui.is-applied .nrm-cal2-status { margin-top: 0; }
	.nrm-ui.nrm-ui .nrm-cal2-day { margin-top: 4px; }
	.nrm-ui.nrm-ui .nrm-cal2-dayhead { padding: 4px 12px; }
	.nrm-ui.nrm-ui .nrm-cal2-row { padding-top: 8px; padding-bottom: 8px; }
	.nrm-cal2.is-panel-open .nrm-cal2-panel { gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); }
	body.admin-bar .nrm-cal2.is-panel-open .nrm-cal2-panel { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
	.nrm-ui.nrm-ui .nrm-cal2-panel-foot { padding-top: 0; }
	/* the month dialog: six cells per row (two rows) so it fits a 320px-high screen without scrolling */
	.nrm-ui.nrm-ui .nrm-cal2-grid { grid-template-columns: repeat(6, 1fr); }
	.nrm-ui.nrm-ui .nrm-cal2-checks { grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.nrm-cal2-checks .nu-check { border-top: 0; }
	.nrm-ui.nrm-ui .nrm-cal2-prefs { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 12px; }
	.nrm-ui.nrm-ui .nrm-cal2-prefs > .nu-check, .nrm-ui.nrm-ui .nrm-cal2-prefs > .nrm-cal2-savenote, .nrm-ui.nrm-ui .nrm-cal2-prefs > .nrm-cal2-forget { grid-column: 1 / -1; }
}
@media (max-height: 500px) and (max-width: 782px) {
	body.admin-bar .nrm-cal2.is-panel-open .nrm-cal2-panel { max-height: calc(100vh - 54px); max-height: calc(100dvh - 54px); }
}
/* Windows high-contrast / forced colours: the pressed state of a segment and the current month do not rely on a background colour. */
@media (forced-colors: active) {
	.nrm-cal2 .nu-seg button[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -3px; text-decoration: underline; }
	.nrm-cal2-mcell.is-current { outline: 2px solid CanvasText; outline-offset: -3px; font-weight: 700; }
	.nrm-cal2 .nrm-cal2-chipx { border: 1px solid CanvasText; }
}
.nrm-ui.nrm-ui .nu-frame.nrm-cal2-frame.is-img-failed > img, .nrm-ui.nrm-ui .nu-frame.nrm-cal2-thumb.is-img-failed > img { display: none; }
.nrm-ui.nrm-ui .nu-frame.nrm-cal2-thumb.is-img-failed::after { padding: 0 2px; line-height: 1.25; }
.nrm-ui.nrm-ui .nu-frame.nrm-cal2-frame.is-img-failed::after { white-space: pre-line; padding: 4px; }
/* Large text on a 320px phone: the 〜 and 「掲載価格」 may drop to the next line rather than push the page wider; an amount or a date is never split inside (nowrap tokens above). */
.nrm-cal2-cheapest { overflow-wrap: break-word; }

/* D-084 review (phone re-test N-1): the phone filter sheet is a grid whose implicit column grew with its content (a long select, the
 * search field) at 320px and >= 150% text, pushing the close and 結果を見る buttons off screen. One shrinkable column, children may shrink. */
.nrm-cal2.is-panel-open .nrm-cal2-panel { grid-template-columns: minmax(0, 1fr); }
.nrm-cal2.is-panel-open .nrm-cal2-panel > * { min-width: 0; }
.nrm-cal2.is-panel-open .nrm-cal2-panel :where(input, select) { max-width: 100%; }

/* Unbreakable tokens (one date, one amount, one counter): never split inside while the cell has room (word-break: keep-all keeps a Japanese counter whole,
 * numerals and 「/」 / 「,」 have no break opportunity). Only a token that alone is wider than its box (a 320px cell under the WCAG 1.4.12 text-spacing override,
 * 400% zoom) may break at the last resort (overflow-wrap) instead of forcing horizontal scroll. */
.nrm-ui.nrm-ui .nrm-cal2-dates a, .nrm-ui.nrm-ui .nrm-cal2-dayhead, .nrm-cal2-daycount, .nrm-cal2-rowdate, .nrm-cal2-cheapest b, .nrm-cal2-cheapest small, .nrm-cal2-shops, .nrm-cal2-tok,
.nrm-cal2-ed-price, .nrm-cal2-ed-date, .nrm-cal2-ed-shops, .nrm-cal2-ed-bonus { white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
/* The words before an old / stock-unknown amount are a sentence, not a token: ordinary Japanese wrapping. */
.nrm-cal2-cheapest.is-old small:first-child, .nrm-cal2-cheapest.is-stockunknown small:first-child { word-break: normal; }
.nrm-ui.nrm-ui .nrm-cal2-go .nrm-cal2-review { word-break: keep-all; overflow-wrap: break-word; } /* 「体験版レビュー 2件」: the line may end at the space, never between 2 and 件 */

/* Keyboard focus (REVIEW3-A11Y S1): the segmented controls clip their children (overflow:hidden, rounded corners), so the ring is drawn inside the segment.
 * Unpressed segment: aubergine ring on white; the pressed (dark) segment: white ring. The date rail scrolls with the left column, so its ring is inside too. */
.nrm-ui.nrm-cal2 .nu-seg button:focus-visible { outline: 2px solid var(--nu-accent); outline-offset: -4px; }
.nrm-ui.nrm-cal2 .nu-seg button[aria-pressed="true"]:focus-visible { outline-color: #fff; }
.nrm-ui.nrm-ui .nrm-cal2-dates a:focus-visible { outline-offset: -2px; }

/* Controls are clearly distinguishable from the page (owner requirement, WCAG 1.4.11): every real button / segment carries its own 1px --nu-line-strong boundary (3.4:1 on white)
 * or a fill; the segments of a segmented control are separate outlined buttons (not plain text between dividers); the selected one is tinted, has an accent border, is bold. */
.nrm-ui.nrm-cal2 .nu-seg { gap: 4px; border: 0; border-radius: 0; background: none; overflow: visible; }
.nrm-ui.nrm-cal2 .nu-seg button, .nrm-ui.nrm-ui.nrm-cal2 .nu-seg button:first-child { border: 1px solid var(--nu-line-strong); border-radius: var(--nu-r); background: var(--nu-surface); color: var(--nu-text); }
.nrm-ui.nrm-cal2 .nu-seg button:hover { background: var(--nu-bg); }
.nrm-ui.nrm-cal2 .nu-seg button[aria-pressed="true"], .nrm-ui.nrm-ui.nrm-cal2 .nu-seg button[aria-pressed="true"]:hover { background: var(--nu-accent-soft); border-color: var(--nu-accent); box-shadow: inset 0 0 0 1px var(--nu-accent); color: var(--nu-accent-dark); font-weight: 700; }
.nrm-ui.nrm-cal2 .nu-seg button[aria-pressed="true"] .nu-n { color: var(--nu-accent-dark); }
.nrm-ui.nrm-cal2 .nu-seg button[aria-pressed="true"]:focus-visible { outline-color: var(--nu-accent-dark); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-media { gap: 4px; }
.nrm-ui.nrm-cal2 a.nrm-cal2-mcell:not(.is-current) { border-color: var(--nu-line-strong); background: var(--nu-surface); }
/* text-style actions inside the sheet / status line are bordered buttons (they were plain underlined text) */
.nrm-ui.nrm-cal2 .nrm-cal2-forget, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-reset-inline { border: 1px solid var(--nu-line-strong); border-radius: var(--nu-r); background: var(--nu-surface); color: var(--nu-text); padding: 0 12px; min-height: 40px; text-decoration: none; font-weight: 700; }
.nrm-ui.nrm-cal2 .nrm-cal2-forget:hover, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-reset-inline:hover { background: var(--nu-bg); }
/* Row actions stay TEXT LINKS, recognisable as links: accent colour (9.7:1), arrow / caret, underline on hover and keyboard focus. */
.nrm-ui.nrm-ui .nrm-cal2-go .nu-link-arrow:is(:hover, :focus-visible), .nrm-ui.nrm-ui .nrm-cal2-go .nu-link-toggle:is(:hover, :focus-visible), .nrm-ui.nrm-ui .nrm-cal2-rvlist a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-forget, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-reset-inline { min-height: var(--nu-tap); } }
@media (forced-colors: active) {
	.nrm-cal2 .nu-seg button, .nrm-cal2 .nrm-cal2-forget, .nrm-cal2 .nrm-cal2-reset-inline, .nrm-cal2 a.nrm-cal2-mcell { border: 1px solid ButtonText; }
	.nrm-cal2 .nu-seg button[aria-pressed="true"] { border-width: 2px; box-shadow: none; }
}

/* Disclosure toggles of a row (「価格・店舗特典 ▼」, 「体験版レビュー N件 ▼」): a control by pattern - aria-expanded, a caret that flips (▼ / ▲, set by monthly-calendar.js),
 * underlined accent text (9.7:1). The underline stays in forced-colors (it is text, so it keeps the system link colour). */
.nrm-ui.nrm-ui .nrm-cal2-go .nu-link-toggle { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nrm-ui.nrm-ui .nrm-cal2-go .nu-link-toggle[aria-expanded="true"] { text-decoration-thickness: 2px; }
.nrm-ui.nrm-ui .nrm-cal2-go .nu-link-toggle [aria-hidden="true"] { text-decoration: none; display: inline-block; margin-left: 4px; }
/* Day rail (release-date jump list): navigation links - accent text, underlined, the count beside it. */
.nrm-ui.nrm-ui .nrm-cal2-dates a { color: var(--nu-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nrm-ui.nrm-ui .nrm-cal2-dates a:hover { color: var(--nu-accent-dark); text-decoration-thickness: 2px; }
@media (forced-colors: active) {
	.nrm-cal2 .nrm-cal2-go .nu-link-toggle, .nrm-cal2 .nrm-cal2-dates a { text-decoration: underline; }
}

/* Round 3 (phone review pass 2): the row's main route 「価格・特典を比べる →」 is a small OUTLINED button (never filled): STYLE's button border (--nu-btn-border, >= 3:1), white
 * fill, accent label (9.7:1), >= 44 px, arrow, accent tint on hover; same family as the work page's purchase buttons. The secondary 「体験版レビュー」 stays a text link
 * and the no-page fold-open stays a disclosure toggle (button.nu-link-toggle). */
/* D-087: the row action is a text link (bold charcoal, underlined, arrow), not a box: the page keeps one filled primary and no outlined button per row. */
.nrm-ui.nrm-ui .nrm-cal2-go a.nrm-cal2-detail { justify-content: flex-start; min-height: var(--nu-tap); padding: 0; border: 0; border-radius: 0; background: none; color: var(--nu-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nrm-ui.nrm-ui .nrm-cal2-go a.nrm-cal2-detail:hover { background: none; color: var(--nu-link); text-decoration-thickness: 2px; }
.nrm-ui.nrm-ui .nrm-cal2-go a.nrm-cal2-detail:focus-visible { text-decoration-thickness: 2px; }
@media (max-height: 480px) and (pointer: coarse) { .nrm-ui.nrm-ui .nrm-cal2-go a.nrm-cal2-detail { min-height: var(--nu-tap); } }
@media (forced-colors: active) { .nrm-cal2 .nrm-cal2-go a.nrm-cal2-detail { color: LinkText; text-decoration: underline; } }

/* ==== D-090 SORBET month list: works first. The toolbar is ONE warm card (foundation tokens): month and search on the first line, the filters (media,
 * order, store bonus, trial review) on the second, the helper settings (density, device save and its note) folded into the 「表示設定」 morph pill
 * (foundation .nu-morph). Selected = the coral axis. Rows: the jacket, title, date, price and the way to price / bonus first; a missing jacket is shown as
 * missing data (its written reason on the cream ground), never a stand-in picture. */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { padding: 14px; border: 1px solid var(--nu-edge); border-radius: var(--nu-r-card); background: var(--nu-warm); box-shadow: inset 0 1px 0 var(--nu-edge-light), var(--nu-elev-1); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls.is-navonly { padding: 10px; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nu-btn { border-radius: var(--nu-r-pill); border-color: var(--nu-edge); background: #fff; box-shadow: inset 0 1px 0 var(--nu-edge-light); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nrm-cal2-pickbtn { border-color: var(--nu-btn-border); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-search input[type="search"] { border-radius: var(--nu-r-pill); padding-left: 18px; background: #fff; }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media { gap: 0; border-radius: var(--nu-r-pill); padding: 3px; border: 1px solid var(--nu-btn-border); background: #fff; }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button { border: 0; border-radius: var(--nu-r-pill); transition: background-color var(--nu-dur-ui) var(--nu-ease), color var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, rgb(196, 56, 80), rgb(160, 42, 64)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button[aria-pressed="true"] .nu-n { color: rgba(255, 255, 255, .92); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-sort select { border-radius: var(--nu-r-pill); padding-left: 14px; background-color: #fff; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-filterbtn { border-radius: var(--nu-r-pill); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check { box-sizing: border-box; padding: 6px 16px 6px 12px; border: 1px solid var(--nu-btn-border); border-radius: var(--nu-r-pill); background: #fff; transition: background-color var(--nu-dur-ui) var(--nu-ease), border-color var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check:has(input:checked) { border-color: var(--nu-accent); background: var(--nu-accent-soft); color: var(--nu-accent-dark); font-weight: 700; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check input { accent-color: var(--nu-accent); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display { align-self: center; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display .nrm-cal2-prefs { display: grid; gap: 8px; padding-left: 16px; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display .nrm-cal2-density { border-radius: var(--nu-r-pill); }
.nrm-cal2.is-panel-open .nrm-cal2-panel .nrm-cal2-display { width: 100%; }
@container (min-width: 700px) {
	@media (min-height: 501px) {
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nav search" "media sort" "checks display"; padding: 16px 18px; border-bottom: 1px solid var(--nu-edge); }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls.is-navonly { grid-template-areas: "nav nav"; padding: 10px 14px; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-search { justify-self: stretch; width: auto; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks { gap: 8px; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display { grid-area: display; justify-self: end; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display[open] { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display .nrm-cal2-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display .nrm-cal2-savenote { flex-basis: 100%; margin: 0; }
	}
}
@container (min-width: 900px) {
	@media (min-height: 501px) {
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "nav search search search" "media sort checks display"; }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls.is-navonly { grid-template-areas: "nav nav nav nav"; }
	}
}
/* rows: a quiet lift on hover; the jacket in a cream frame; a missing jacket reads as missing data */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-row { border-radius: 16px; transition: background-color var(--nu-dur-ui) var(--nu-ease); }
@media (hover: hover) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-row:hover { background: var(--nu-warm-2); } }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-jacket .nu-frame { border: 0; border-radius: 10px; background: var(--nu-sorbet-cream); box-shadow: 0 0 0 1px var(--nu-edge), 0 6px 14px -8px rgba(92, 40, 48, .35); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-nojacket { box-shadow: none; border: 1px dashed rgba(92, 40, 48, .28); background: repeating-linear-gradient(135deg, var(--nu-warm-2) 0 8px, var(--nu-warm) 8px 16px); color: var(--nu-sub); font-size: var(--nu-fs-xs); font-weight: 700; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-name a { color: var(--nu-text); }
@media (prefers-reduced-motion: reduce) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-row, .nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check { transition: none; } }
@media (forced-colors: active) {
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { border: 1px solid CanvasText; }
	.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check:has(input:checked) { border: 2px solid Highlight; }
}
/* D-090 review: the two conditions sit in one row; 「表示設定」 has the size of the other controls */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display > summary { min-height: 40px; font-size: var(--nu-fs-m); padding-right: 16px; }
@container (min-width: 900px) { @media (min-height: 501px) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks { flex-wrap: nowrap; } .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check { white-space: nowrap; padding-left: 10px; padding-right: 12px; } } }

/* ==== D-091: the month list - one quiet control area, then the works. No card around the controls, no pills: the month stepper is text, the search is a
 * line, the media are text tabs (coral rule under the selected one), the order a plain select, the two conditions plain checkboxes, 表示設定 a text pill
 * without fill. The works begin right under one hairline. Rows keep their facts; the jacket sits without a rim. */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--nu-edge); border-radius: 0; background: none; box-shadow: none; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls.is-navonly { padding: 0 0 8px; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nu-btn { border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--nu-sub); font-weight: 700; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nu-btn:hover { background: var(--nu-warm-2); color: var(--nu-text); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nrm-cal2-pickbtn { border: 0; color: var(--nu-text); font-size: var(--nu-fs-l); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nu-btn.is-disabled { color: var(--nu-muted); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-search input[type="search"] { border: 0; border-bottom: 1px solid var(--nu-line-strong); border-radius: 0; padding-left: 0; background: transparent; box-shadow: none; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-search input[type="search"]:focus-visible { outline: none; border-bottom: 2px solid var(--nu-accent); }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media { padding: 0; border: 0; border-radius: 0; background: none; gap: 4px; }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button { position: relative; border: 0; border-radius: 6px; background: none; color: var(--nu-sub); font-weight: 700; box-shadow: none; }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button:hover { background: var(--nu-warm-2); color: var(--nu-text); }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button[aria-pressed="true"] { color: var(--nu-accent-dark); background: none; box-shadow: inset 0 -2px 0 var(--nu-accent); }
.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button[aria-pressed="true"] .nu-n { color: var(--nu-accent-dark); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-sort select { border: 0; border-bottom: 1px solid var(--nu-line-strong); border-radius: 0; padding-left: 0; background-color: transparent; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-filterbtn { border-radius: 6px; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check { padding: 6px 4px; border: 0; border-radius: 6px; background: none; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check:has(input:checked) { border: 0; background: none; color: var(--nu-accent-dark); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display { border-color: transparent; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display[open] { border-color: var(--nu-edge); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display > summary { color: var(--nu-sub); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display > summary::before { box-shadow: none; background: var(--nu-warm-2); }
/* the sheet on a phone keeps its own surface (it is a layer over the page) */
.nrm-cal2.is-panel-open .nrm-cal2-panel .nrm-cal2-checks .nu-check { border-top: 1px solid var(--nu-line); border-radius: 0; }
.nrm-cal2.is-panel-open .nrm-cal2-panel .nrm-cal2-checks .nu-check:first-child { border-top: 0; }
/* the left column (wide): quiet labels, no boxes */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-box { border-top-color: var(--nu-edge); }
/* rows: no rim on the jacket, no rounded hover slab - a hairline between works and a faint ground on hover */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-row { border-radius: 0; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-jacket .nu-frame { border-radius: 6px; box-shadow: 0 1px 2px rgba(92, 40, 48, .1), 0 10px 18px -14px rgba(92, 40, 48, .4); }
@container (min-width: 700px) {
	@media (min-height: 501px) {
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { padding: 0 0 12px; border-bottom: 1px solid var(--nu-edge); }
		.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls.is-navonly { padding: 0 0 8px; }
	}
}
@media (forced-colors: active) {
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { border: 0; border-bottom: 1px solid CanvasText; }
	.nrm-ui.nrm-ui.nrm-cal2 .nu-seg.nrm-cal2-media button[aria-pressed="true"] { background: none; color: Highlight; box-shadow: inset 0 -3px 0 Highlight; }
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-search input[type="search"], .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-sort select { border-bottom: 1px solid ButtonText; }
}

/* D-091 review round: the side column (wide) is plain text - months without boxes (the current one coral), the year a line select, the release dates a
 * quiet anchor list; the month arrows read as actions; the reset is a text action, not a pill. */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-mcell { border: 0; border-radius: 6px; background: none; box-shadow: none; }
.nrm-ui.nrm-ui.nrm-cal2 a.nrm-cal2-mcell:hover { background: var(--nu-warm-2); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-mcell.is-current, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-mcell[aria-current] { color: #fff; background: var(--nu-accent); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-yearsel select { border: 0; border-bottom: 1px solid var(--nu-line-strong); border-radius: 0; padding-left: 0; background-color: transparent; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-dates a { text-decoration: none; border-bottom: 0; color: var(--nu-text); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-dates a:hover { color: var(--nu-accent-dark); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-dates li { border-top-color: var(--nu-edge); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nu-btn { color: var(--nu-text); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-monthnav .nu-btn.is-disabled { color: var(--nu-muted); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-reset, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-reset-inline { border: 0; background: none; box-shadow: none; padding-left: 4px; padding-right: 4px; color: var(--nu-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* D-092: the controls in one soft box on the ground (no border, no shadow) - the 81-web rhythm: one bar, then the works */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { padding: 14px 16px; border: 0; border-radius: 16px; background: var(--nu-warm-2, #FFF6EE); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls.is-navonly { padding: 10px 16px; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-search input[type="search"], .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-sort select { background: transparent; }
@container (min-width: 700px) { @media (min-height: 501px) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { padding: 14px 18px; border-bottom: 0; } } }
/* D-092: at 900-1180px the two conditions wrap inside their cell instead of running under the display pill; the pill keeps its own column */
@container (min-width: 900px) { @media (min-height: 501px) {
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { grid-template-columns: auto auto minmax(0, 1fr) auto; }
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks { flex-wrap: wrap; gap: 2px 4px; min-width: 0; }
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-checks .nu-check { white-space: normal; }
	.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-display { justify-self: end; margin-left: 8px; }
} }

/* ==== D-094: the list's controls on a stage strip (foundation .nu-stage colours): one ink band edge to edge, white type, dark glass fields and chips; the rows on paper. */
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { position: relative; isolation: isolate; margin: 0 calc(50% - 50vw) 20px; padding: 18px max(16px, calc(50vw - 50%)) 20px; border-radius: 0; background: var(--nu-stage, #15121A); color: var(--nu-on-stage, #fff); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls label, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls legend, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls span, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls p, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls summary, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls a { color: var(--nu-on-stage, #fff); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls input, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls select, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls button, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-chip, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-seg, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls details, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nrm-cal2-monthnav a { background: var(--nu-glass-dark, rgba(255,255,255,.07)); border-color: var(--nu-glass-rim, rgba(255,255,255,.16)); color: var(--nu-on-stage, #fff); box-shadow: none; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls input::placeholder { color: var(--nu-on-stage-3, rgba(255,255,255,.58)); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-seg button[aria-pressed="true"], .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-chip[aria-pressed="true"], .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls [aria-current="true"] { background: var(--nu-accent, #C2364E); border-color: var(--nu-accent, #C2364E); color: #fff; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-seg button[aria-pressed="true"] .nu-n, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-chip[aria-pressed="true"] .nu-n { color: #fff; opacity: .85; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls input:focus-visible, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls select:focus-visible, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls button:focus-visible, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls a:focus-visible, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nrm-cal2-monthnav a:hover, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls button:hover { background: var(--nu-glass-dark-hover, rgba(255,255,255,.12)); border-color: var(--nu-glass-rim-hover, rgba(255,255,255,.34)); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls select option { color: #1F1B1E; background: #fff; }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-n, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls small, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nrm-cal2-note { color: var(--nu-on-stage-2, rgba(255,255,255,.78)); }
.nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-seg button, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-seg label { color: var(--nu-on-stage, #fff); }
@media (prefers-reduced-transparency: reduce) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls input, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls select, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls button, .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls .nu-chip { background: var(--nu-stage-2, #241D29); } }
@media (forced-colors: active) { .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls { background: Canvas; color: CanvasText; } .nrm-ui.nrm-ui.nrm-cal2 .nrm-cal2-controls * { color: CanvasText; } }