/* ============================================================================
   jishie — brand system (single source of truth for colour + type)
   Retro monochrome-LCD identity: Game-Boy/Nokia green, pixel display type,
   mono body type. Loaded site-wide; see /brand.html for the brand book.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  /* ---- surfaces ---- */
  --paper:#F2F4E9;        /* soft LCD-tinted cream */
  --card:#FBFCF3;         /* raised surface */
  --ink:#12220F;          /* near-black green */
  --soft:#516149;         /* muted green-grey (secondary text) */
  --line:#CDD6BE;         /* hairline / borders */

  /* ---- the brand green (the color of the whole site) ---- */
  --brand:#2E7D32;        /* primary accent · links · buttons */
  --brand-deep:#1B5E20;   /* hover / active */
  --brand-dim:#DEEDC9;    /* pale fill / highlight bg */

  /* ---- the LCD (screens, the mascot, retro moments) ---- */
  --lcd:#9BBC0F;          /* bright pixel green */
  --lcd-mid:#6E8A0C;
  --lcd-ink:#0F380F;      /* dark screen green */

  /* ---- semantic (kept in-family) ---- */
  --verify:#2E7D32;       /* verified == brand green (trust is the core value) */
  --amber:#B26E00;
  --red:#B3261E;

  /* ---- type ---- */
  --pixel:'Press Start 2P',ui-monospace,monospace;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- pixel border (chunky, no blur) ---- */
  --edge:3px solid var(--ink);
  --drop:5px 5px 0 var(--ink);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E140C;--card:#161D12;--ink:#E7EED7;--soft:#9DAE8B;--line:#2C361F;
    --brand:#8BC98F;--brand-deep:#B6E0B9;--brand-dim:#22301A;
    --lcd:#9BBC0F;--lcd-mid:#7C9A0D;--lcd-ink:#0F380F;
    --verify:#8BC98F;--edge:3px solid #2C361F;--drop:5px 5px 0 #05100420;
  }
}
:root[data-theme="dark"]{
  --paper:#0E140C;--card:#161D12;--ink:#E7EED7;--soft:#9DAE8B;--line:#2C361F;
  --brand:#8BC98F;--brand-deep:#B6E0B9;--brand-dim:#22301A;
  --verify:#8BC98F;--edge:3px solid #2C361F;
}

/* ---- base ---- */
.brandreset,.brandreset *{box-sizing:border-box}
body.brand-body{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.6;image-rendering:pixelated}
.brand-body a{color:var(--brand)} .brand-body a:hover{color:var(--brand-deep)}
.brand-body ::selection{background:var(--lcd);color:var(--lcd-ink)}
.brand-body :focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- pixel type helpers ---- */
.pixel{font-family:var(--pixel);line-height:1.6;letter-spacing:0}
.brand-h1{font-family:var(--pixel);font-size:clamp(15px,3.4vw,26px);line-height:1.5;color:var(--ink)}
.brand-h2{font-family:var(--pixel);font-size:12px;line-height:1.7;color:var(--ink)}

/* ---- pixel frame primitives (the "elements") ---- */
.px-panel{background:var(--card);border:var(--edge);box-shadow:var(--drop)}
.px-btn{font-family:var(--pixel);font-size:9px;line-height:1.4;border:var(--edge);background:var(--brand-dim);color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;padding:.55rem .8rem}
.px-btn:hover{background:var(--lcd)} .px-btn:active{transform:translate(2px,2px);box-shadow:none}
.px-btn.primary{background:var(--brand);color:#fff}
.px-tag{font-family:var(--pixel);font-size:7px;line-height:1.6;padding:.3rem .45rem;background:var(--lcd-ink);color:var(--lcd);border-radius:2px}

/* ---- shared chrome: header, breadcrumb, footer (used site-wide) ---- */
.px-header{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 0 .9rem;border-bottom:var(--edge);flex-wrap:wrap}
.px-brand{font-family:var(--pixel);font-size:15px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.px-brand .mk{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;background:var(--brand);color:#fff;font-family:var(--mono);font-weight:600;border-radius:3px}
.px-nav{margin-left:auto;display:flex;gap:1rem;flex-wrap:wrap;font-size:12.5px}
.px-nav a{color:var(--soft);text-decoration:none} .px-nav a:hover{color:var(--brand)}
.px-nav a[aria-current="page"]{color:var(--brand);font-weight:600}
.px-crumbs{font-size:12px;color:var(--soft);padding:.7rem 0 .2rem}
.px-crumbs a{color:var(--brand);text-decoration:none} .px-crumbs b{color:var(--ink)}
.px-footer{border-top:var(--edge);margin-top:2.6rem;padding-top:1rem;font-size:11.5px;color:var(--soft)}

/* the 市 mark, retro tile */
.mk-tile{background:var(--lcd-ink);color:var(--lcd)}

/* ---- universal search box (in the header, every page) ---- */
.px-search{display:flex;flex:1 1 260px;max-width:440px;min-width:180px;border:var(--edge);background:var(--card)}
.px-search input{flex:1;font-family:var(--mono);font-size:13px;padding:.5rem .7rem;border:none;background:transparent;color:var(--ink);min-width:0}
.px-search input:focus{outline:none}
.px-search button{font-family:var(--pixel);font-size:12px;border:none;border-left:3px solid var(--ink);background:var(--brand);color:#fff;padding:0 .8rem;cursor:pointer}
.px-search button:hover{background:var(--brand-deep)}
@media(max-width:760px){.px-search{order:3;flex-basis:100%;max-width:100%}}

/* ---- the shared page shell ---- */
.px-wrap{max-width:960px;margin:0 auto;padding:0 1.1rem 4rem}
.brand-body h1{font-family:var(--pixel);font-size:clamp(15px,3.4vw,24px);line-height:1.5;margin:1.2rem 0 .6rem}
.brand-body h2{font-family:var(--pixel);font-size:12px;line-height:1.7}

/* ---- shared data table ---- */
.brand-body table{width:100%;border-collapse:collapse;background:var(--card);border:var(--edge);font-size:12.8px;box-shadow:var(--drop)}
.brand-body thead th{text-align:left;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);padding:.6rem .7rem;border-bottom:var(--edge);background:var(--brand-dim)}
.brand-body tbody td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.brand-body tbody tr:last-child td{border-bottom:none}
.brand-body th.num,.brand-body td.num{text-align:right;white-space:nowrap}
.brand-body th[aria-sort] a::after{color:var(--brand)}