/* Naruto theme "notice-board" (docs/design-system.md "Naruto theme layer"): the Hokage's notice board and desk.
   News (/news and every /news/<slug> post), Updates and the Roadmap. News posts are parchment notices pinned to a
   wooden board with a red ink date stamp; patch notes are paper slips pinned under stamped version labels; the roadmap
   is the Hokage's desk: progress papers with an ink seal, category drawers in wood, feature sheets on parchment.
   Textures are CSS; game art (post banners) as it is. Status colours on paper use darker ink tones of the same hues. */
/* a wider metric fallback for the brush font (Shojumaru runs about 20 % wider than Arial Black), so brush titles take
   the same lines before and after the web font arrives (no layout shift); naruto.css's own fallback is narrower */
@font-face { font-family: "Shojumaru Fallback Wide"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 120%; ascent-override: 80%; descent-override: 22%; line-gap-override: 0%; }
body[data-theme="notice-board"] {
  --nk-brush: "Shojumaru", "Shojumaru Fallback Wide", var(--head);
  --theme-accent: #e0533c;            /* red seal ink */
  --theme-accent-2: #f2c46d;
  --theme-chakra: #ffae5c;
  --theme-cloth: #5a1f17; --theme-cloth-hi: #7a2c20; --theme-cloth-lo: #3a120d;
  --theme-glow: rgba(224, 83, 60, 0.09); --theme-glow-2: rgba(242, 196, 109, 0.05);
  --theme-texture: var(--nk-leaf-url); --theme-texture-size: 180px; --theme-texture-opacity: 0.03;
  --theme-mark: var(--nk-leaf-url);
  /* ink tones for status colours on paper (same hues as the site's states, dark enough for AA on parchment) */
  --nb-ok: #17663a; --nb-partial: #0c6560; --nb-needs: #7a4f00; --nb-wip: #8a4500; --nb-issue: #9c2018; --nb-plan: #333f9c; --nb-off: #5e4528;
  --nb-pin: radial-gradient(circle at 35% 35%, #ff8a7a, var(--nk-red) 55%, #5a0f0b);
}

/* the board itself: dark wooden planks with an inner frame */
.nb-board, [data-theme="notice-board"] .news-list, [data-theme="notice-board"] .updates {
  padding: 30px 26px; border-radius: 4px; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 5px #2a1708, inset 0 0 0 6px rgba(255, 210, 160, 0.12), 0 18px 34px -18px rgba(0, 0, 0, 0.9); }
@media (max-width: 600px) { .nb-board, [data-theme="notice-board"] .news-list, [data-theme="notice-board"] .updates { padding: 22px 12px; } }

/* hero: a red paper tag over the title */
.nb-kicker { margin: 0 0 12px; }
.nb-kicker svg { width: 14px; height: 14px; }

/* filter chips: paper tags; the chosen one is the red tag */
[data-theme="notice-board"] .chips .chip { min-height: 44px; padding: 0 14px; border-radius: 1px; background: var(--nk-parchment); color: var(--nk-ink); font: 700 0.8125rem/1 var(--head); letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-theme="notice-board"] .chips .chip:hover { color: var(--nk-red-ink); box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.5), 0 0 0 2px rgba(242, 196, 109, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-theme="notice-board"] .chips .chip[aria-pressed="true"] { background: var(--nk-red); color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-theme="notice-board"] .chips .chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-theme="notice-board"] .view-switch button { min-height: 44px; }

/* ---------- news: pinned notices ---------- */
[data-theme="notice-board"] .news-list { gap: 30px; }
[data-theme="notice-board"] .news-item, [data-theme="notice-board"] .news-post { position: relative; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink);
  box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.3), 0 10px 18px -8px rgba(0, 0, 0, 0.7); }
[data-theme="notice-board"] .news-item { grid-template-columns: 124px minmax(0, 1fr); padding: 26px 24px 22px; }
[data-theme="notice-board"] .news-item::before, [data-theme="notice-board"] .news-post::before { content: ""; position: absolute; z-index: 2; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--nb-pin); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55); }
[data-theme="notice-board"] .news-list > .news-item:nth-child(odd) { transform: rotate(-0.35deg); }
[data-theme="notice-board"] .news-list > .news-item:nth-child(even) { transform: rotate(0.35deg); }
@media (prefers-reduced-motion: reduce) { [data-theme="notice-board"] .news-list > .news-item { transform: none; } }
/* the date as a red ink stamp */
[data-theme="notice-board"] .news-date { align-self: start; justify-self: start; padding: 8px 10px 7px; border-radius: 3px; color: var(--nk-red-ink); text-align: center; text-transform: uppercase;
  font: 700 0.9375rem/1.15 var(--head); letter-spacing: 0.04em; box-shadow: inset 0 0 0 2px rgba(168, 35, 27, 0.85), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(168, 35, 27, 0.5);
  background: rgba(168, 35, 27, 0.05); transform: rotate(-5deg); mix-blend-mode: multiply; }
[data-theme="notice-board"] .news-date span { color: var(--nk-red-ink); font: 700 0.75rem/1.3 var(--head); letter-spacing: 0.08em; margin-top: 4px; }
[data-theme="notice-board"] .news-item h2 { font-family: var(--nk-brush); font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; color: var(--nk-ink); margin: 0 0 10px; }
[data-theme="notice-board"] .news-item h2 a { color: var(--nk-ink); }
[data-theme="notice-board"] .news-item h2 a:hover { color: var(--nk-red-ink); }
@media (max-width: 600px) {
  [data-theme="notice-board"] .news-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 16px 18px; }
  [data-theme="notice-board"] .news-item h2 { font-size: 1.2rem !important; }
}
/* tags: small talisman strips */
[data-theme="notice-board"] .news-item .tag, [data-theme="notice-board"] .news-post .tag { min-height: 22px; padding: 0 8px; border-radius: 1px; background: rgba(168, 35, 27, 0.1); color: var(--nk-red-ink);
  box-shadow: inset 0 0 0 1px rgba(168, 35, 27, 0.4); font: 700 0.75rem/1 var(--head); letter-spacing: 0.06em; }
/* the post body in ink */
[data-theme="notice-board"] .news-body { color: var(--nk-ink-2); }
[data-theme="notice-board"] .news-body h2, [data-theme="notice-board"] .news-body h3, [data-theme="notice-board"] .news-body strong, [data-theme="notice-board"] .news-body b { color: var(--nk-ink); }
[data-theme="notice-board"] .news-body a { color: var(--nk-red-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
[data-theme="notice-board"] .news-body a:hover { color: var(--nk-ink); }
[data-theme="notice-board"] .news-body .hl { color: var(--nk-red-ink); font-weight: 700; }
[data-theme="notice-board"] .news-body li::marker { color: var(--nk-red); }
[data-theme="notice-board"] .post-banner, [data-theme="notice-board"] .news-body img { box-shadow: 0 0 0 3px #fff8e6, 0 0 0 4px rgba(90, 53, 25, 0.4); border-radius: 1px; }
[data-theme="notice-board"] .news-list .empty { color: #ead9c3; }
[data-theme="notice-board"] .news-list > .skc-news { background: rgba(241, 227, 192, 0.12); }

/* a news post page: one big notice pinned on the desk, with the date stamp in its corner */
[data-theme="notice-board"] .news-post { margin-top: 10px; padding: 32px 30px 28px; }
.nb-stamp { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: var(--nk-red-ink); text-align: center; pointer-events: none;
  font: 700 0.8125rem/1.15 var(--head); letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-12deg); mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 2px rgba(168, 35, 27, 0.85), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(168, 35, 27, 0.55); }
.nb-stamp b { display: block; font: 400 1.35rem/1 var(--nk-brush); }
[data-theme="notice-board"] .news-post:has(.nb-stamp) > .tags { padding-right: 104px; }
@media (max-width: 600px) {
  [data-theme="notice-board"] .news-post { padding: 26px 16px 20px; }
  .nb-stamp { width: 74px; height: 74px; top: 12px; right: 10px; font-size: 0.75rem; }
  .nb-stamp b { font-size: 1.1rem; }
  [data-theme="notice-board"] .news-post:has(.nb-stamp) > .tags { padding-right: 82px; min-height: 64px; }
}

/* ---------- updates: patch-note slips pinned under stamped version labels ---------- */
[data-theme="notice-board"] .updates .update-group { margin: 0 0 26px; }
[data-theme="notice-board"] .updates .update-group:last-child { margin-bottom: 0; }
[data-theme="notice-board"] .updates .update-ver { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 7px 14px; border-radius: 1px;
  background: var(--nk-ink); color: var(--nk-paper); font: 400 1.05rem/1.2 var(--nk-brush); letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.25), inset 4px 0 0 var(--nk-red), 0 3px 6px rgba(0, 0, 0, 0.5); }
[data-theme="notice-board"] .updates .update-ver small { color: #e8cfae; font: 700 0.8125rem/1 var(--head); letter-spacing: 0.06em; text-transform: uppercase; }
[data-theme="notice-board"] .updates .update-list { gap: 12px; }
[data-theme="notice-board"] .updates .update { position: relative; padding: 14px 16px 14px 18px; border-radius: 1px; background: var(--nk-parchment); color: var(--nk-ink-2);
  box-shadow: inset 0 0 22px rgba(120, 70, 20, 0.2), inset 0 0 0 1px rgba(90, 53, 25, 0.3), 0 6px 10px -6px rgba(0, 0, 0, 0.7); }
[data-theme="notice-board"] .updates .update::before { content: ""; position: absolute; top: -4px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--nb-pin); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
[data-theme="notice-board"] .updates .update h3 { color: var(--nk-ink); }
[data-theme="notice-board"] .updates .update p, [data-theme="notice-board"] .updates .update li { color: var(--nk-ink-2); }
[data-theme="notice-board"] .updates .update a { color: var(--nk-red-ink); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="notice-board"] .updates .update .faint, [data-theme="notice-board"] .updates .app-note { color: #e8cfae; }
[data-theme="notice-board"] .updates .update .faint { color: var(--nk-ink-3); }
[data-theme="notice-board"] .updates .empty { color: #ead9c3; }
[data-theme="notice-board"] .updates .update-list > .skc-update { background: rgba(241, 227, 192, 0.12); }
[data-theme="notice-board"] .update-group.is-coming .update-ver { background: #3a2a14; }

/* ---------- status badges and labels in ink on paper ---------- */
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.badge, .st-label, .mini) { box-shadow: inset 0 0 0 1px currentColor; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.b-ok, .st-done, .i-ok) { color: var(--nb-ok) !important; background: rgba(23, 102, 58, 0.1) !important; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.b-partial, .st-partial, .i-partial) { color: var(--nb-partial) !important; background: rgba(12, 101, 96, 0.1) !important; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.b-test, .st-needs, .st-testing, .i-test) { color: var(--nb-needs) !important; background: rgba(122, 79, 0, 0.1) !important; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.b-wip, .st-progress, .i-wip) { color: var(--nb-wip) !important; background: rgba(138, 69, 0, 0.1) !important; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.b-bad, .b-issue, .st-issue, .i-issue) { color: var(--nb-issue) !important; background: rgba(156, 32, 24, 0.1) !important; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) :is(.b-plan, .st-planned, .i-plan) { color: var(--nb-plan) !important; background: rgba(51, 63, 156, 0.1) !important; }
[data-theme="notice-board"] :is(.update, .feature, .issue, .col, .news-item, .news-post, .rm-overall, .rm-counts) .b-off { color: var(--nb-off) !important; background: rgba(90, 53, 25, 0.1) !important; }

/* ---------- roadmap: the Hokage's desk ---------- */
[data-theme="notice-board"] .rm-overall, [data-theme="notice-board"] .rm-counts, [data-theme="notice-board"] .feature, [data-theme="notice-board"] .issue, [data-theme="notice-board"] .col {
  border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink-2); border: 0;
  box-shadow: inset 0 0 26px rgba(120, 70, 20, 0.22), inset 0 0 0 1px rgba(90, 53, 25, 0.3), 0 10px 18px -10px rgba(0, 0, 0, 0.75); }
[data-theme="notice-board"] .rm-overall, [data-theme="notice-board"] .rm-counts { position: relative; }
[data-theme="notice-board"] .rm-overall::before, [data-theme="notice-board"] .rm-counts::before { content: ""; position: absolute; z-index: 2; top: -5px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%;
  background: var(--nb-pin); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
[data-theme="notice-board"] .rm-summary { gap: 18px; }
[data-theme="notice-board"] .rm-overall h2 { color: var(--nk-ink); font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; }
[data-theme="notice-board"] .rm-overall .muted, [data-theme="notice-board"] .rm-counts span { color: var(--nk-ink-2); }
[data-theme="notice-board"] .rm-overall .sk, [data-theme="notice-board"] .rm-counts .sk { background: rgba(90, 53, 25, 0.16); }
/* the overall ring as a red ink seal */
[data-theme="notice-board"] .ring { background: conic-gradient(var(--nk-red) calc(var(--p) * 1%), rgba(90, 53, 25, 0.16) 0); box-shadow: 0 0 0 3px rgba(168, 35, 27, 0.18); }
[data-theme="notice-board"] .ring::before { background: var(--nk-parchment); box-shadow: inset 0 0 0 2px rgba(168, 35, 27, 0.55); }
[data-theme="notice-board"] .ring b { color: var(--nk-red-ink); font-family: var(--nk-brush); font-weight: 400; }
[data-theme="notice-board"] .rm-counts .c-done, [data-theme="notice-board"] .rm-counts .c-ok { color: var(--nb-ok); }
[data-theme="notice-board"] .rm-counts .c-partial { color: var(--nb-partial); }
[data-theme="notice-board"] .rm-counts .c-needs, [data-theme="notice-board"] .rm-counts .c-testing, [data-theme="notice-board"] .rm-counts .c-test { color: var(--nb-needs); }
[data-theme="notice-board"] .rm-counts .c-progress, [data-theme="notice-board"] .rm-counts .c-wip { color: var(--nb-wip); }
[data-theme="notice-board"] .rm-counts .c-issue { color: var(--nb-issue); }
[data-theme="notice-board"] .rm-counts .c-planned, [data-theme="notice-board"] .rm-counts .c-plan { color: var(--nb-plan); }
/* category drawers: a wooden strip with the number in a red seal */
[data-theme="notice-board"] .phase > summary { border: 0; border-radius: 3px; background: var(--nk-wood-planks); color: #ead9c3;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #2a1708, inset 0 0 0 4px rgba(255, 210, 160, 0.12), 0 10px 18px -12px rgba(0, 0, 0, 0.8); }
[data-theme="notice-board"] .phase > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-theme="notice-board"] .phase-num { border-radius: 50%; background: radial-gradient(circle, #fff3d6 0 56%, transparent 57%), radial-gradient(circle, var(--nk-red) 0 100%);
  color: var(--nk-red-ink); font: 400 1.05rem/1 var(--nk-brush); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); transform: rotate(-8deg); }
[data-theme="notice-board"] .phase-title h2 { color: #fff3d6; font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; }
[data-theme="notice-board"] .phase-title p { color: #e8cfae; }
[data-theme="notice-board"] .phase-pct { color: #fff3d6; }
[data-theme="notice-board"] .phase-pct svg { color: #e8cfae; }
[data-theme="notice-board"] .features { padding-top: 18px; }
[data-theme="notice-board"] .feature-head h3, [data-theme="notice-board"] .col h3 { color: var(--nk-ink); }
[data-theme="notice-board"] .feature-head b { color: var(--nk-red-ink); }
[data-theme="notice-board"] .feature > p, [data-theme="notice-board"] .feature .muted, [data-theme="notice-board"] .issue small, [data-theme="notice-board"] .col li small { color: var(--nk-ink-3); }
[data-theme="notice-board"] .feature .faint, [data-theme="notice-board"] .items .item-u, [data-theme="notice-board"] .items .item-d { color: var(--nk-ink-3); }
[data-theme="notice-board"] .items li, [data-theme="notice-board"] .items li.s-done, [data-theme="notice-board"] .items li.s-planned, [data-theme="notice-board"] .col li, [data-theme="notice-board"] .issue p { color: var(--nk-ink-2); }
[data-theme="notice-board"] .items .item-t, [data-theme="notice-board"] .items b, [data-theme="notice-board"] .items strong { color: var(--nk-ink); }
[data-theme="notice-board"] .feature a, [data-theme="notice-board"] .issue a, [data-theme="notice-board"] .col a { color: var(--nk-red-ink); }
[data-theme="notice-board"] .issue { box-shadow: inset 4px 0 0 var(--nk-red), inset 0 0 26px rgba(120, 70, 20, 0.22), inset 0 0 0 1px rgba(90, 53, 25, 0.3), 0 10px 18px -10px rgba(0, 0, 0, 0.75); }
[data-theme="notice-board"] #issues .empty, [data-theme="notice-board"] #phases > .empty { color: var(--muted); }
[data-theme="notice-board"] .news-item ul, [data-theme="notice-board"] .news-item li, [data-theme="notice-board"] .news-post li { color: var(--nk-ink-2); }
[data-theme="notice-board"] .news-post > .tags, [data-theme="notice-board"] .news-item .tags { align-items: flex-start; align-content: flex-start; }
[data-theme="notice-board"] .ring b { font-size: 1.75rem; }
@media (max-width: 760px) { [data-theme="notice-board"] .ring b { font-size: 1.35rem; } }