/* Tekiji — the layer every page loads, on top of tokens.css.

   Before this file there were two answers for the shared chrome: styles.css
   (landing + issue pages) and company.css, which restated the base layer in the
   density register because the redesign landed one page at a time. That split
   is what the site-wide pass closes: the masthead, the chips, the section
   chrome, the ledger register and the footer are written once, here, and every
   page sheet after it adds only what its own page needs.

   Load order is always `tokens.css`, `base.css`, then exactly one page sheet:

     /                     home.css
     /companies/           companies.css
     /companies/{code}/    company.css
     /issues/ and /issues/NNN/   issue.css

   A page sheet may restate a value from here (the issue pages keep their own
   measure and line height, so the issue layout is unchanged by this pass); it
   never restates the chrome. */

/* ---- base ---- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overflow-x: clip; }

/* Fluid type, site-wide. The whole site is rem/ch-relative, so scaling the
   root scales everything proportionally and the line lengths in ch stay
   constant: 100% (16px root) up to a 1600px viewport, then linear to 112.5%
   (18px root) at 2000px and above. Stated in %/rem, not px, so a browser
   font-size preference still applies. */
html { font-size: clamp(100%, 0.5rem + 0.5vw, 112.5%); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-lg); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- masthead (variant C: 適時 vertical slip + mono uppercase nav) ----
   Slip treatment is C3: frameless, a single 1px ink rule anchoring the left
   edge, the rule overhanging the glyphs by 0.22em top and bottom, 1.05rem at
   0.34em tracking. These parameters are CEO-final — do not tune them. */
.masthead { border-bottom: 1px solid var(--hairline); }
.masthead-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-md); padding-bottom: var(--space-md);
}
.c-mark {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  text-decoration: none; color: var(--ink);
}
.c-mark:hover { color: var(--ink); }
.c-slip {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-jp-serif); font-weight: 600; font-size: 1.05rem;
  line-height: 1; letter-spacing: 0.34em; color: var(--ink);
  border-left: 1px solid var(--ink); padding: 0.22em 0 0.22em 0.4em;
}
/* drop the trailing tracking so the pair optically centres on the rule */
.c-slip span:last-child { letter-spacing: 0; }
.c-lockup { display: flex; flex-direction: column; gap: 0.32rem; }
.c-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  line-height: 1; letter-spacing: 0.005em;
}
.c-tagline {
  font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.c-nav { display: flex; gap: var(--space-lg); min-width: 0; }
.c-nav::-webkit-scrollbar { display: none; }
.c-link {
  flex: 0 0 auto; font-family: var(--font-data); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; padding-bottom: 0.125rem;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.c-link:hover { color: var(--accent); }
.c-link.is-here { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- disclosure-type chips ---- */
.chip {
  display: inline-block; font-family: var(--font-body);
  font-size: var(--text-chip); font-weight: 600; letter-spacing: 0.045em;
  text-transform: uppercase; line-height: 1.4;
  padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-chip);
  white-space: nowrap; vertical-align: baseline;
}
.chip--fy  { background: var(--chip-fy-bg);  color: var(--chip-fy-tx); }
.chip--q   { background: var(--chip-q-bg);   color: var(--chip-q-tx); }
.chip--rev { background: var(--chip-rev-bg); color: var(--chip-rev-tx); }
.chip--lsh { background: var(--chip-lsh-bg); color: var(--chip-lsh-tx); }
.chip--cor { background: var(--chip-cor-bg); color: var(--chip-cor-tx); }
.chip--sec { background: var(--chip-sec-bg); color: var(--chip-sec-tx); }

/* ---- filing card: one disclosure, as a card that links to its company ----
   Written here rather than in home.css because two pages print it now: the
   front page's "this week, verified" cards and the issue digest's one card per
   disclosure. They say the same thing about the same filing, so they say it in
   one component; each page sheet keeps only the stack it lays the cards out in
   (home.css `.week-grid`, issue.css `.digest-grid`) and whatever it adds
   inside them (home.css `.minirow`). */
.filing-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.filing-card-top { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.filing-name {
  font-family: var(--font-display); font-size: var(--text-lede); font-weight: 600;
  line-height: 1.3; min-width: 0; overflow-wrap: anywhere;
}
.filing-name a { color: var(--ink); text-decoration: none; }
.filing-name a:hover { color: var(--accent); }
.filing-meta { font-size: var(--text-xs); color: var(--muted); }
.filing-verify { font-family: var(--font-data); font-size: var(--text-xs); color: var(--ok); }
.filing-links {
  font-size: var(--text-sm); display: flex; gap: var(--space-md);
  align-items: baseline; flex-wrap: wrap;
}
/* §3.5's pointer, in the card's own quietest register — the figures above it
   came off TDnet and the page has to say so. */
.filing-source { font-family: var(--font-data); font-size: var(--text-xs); color: var(--faint); }
/* The securities code, wherever it sits beside a name: in a card's heading and
   in the front page's filing log. */
.feed-code { font-family: var(--font-data); font-weight: 600; }

/* ---- section chrome: a 2px ink rule, the heading, and one link on its right ---- */
section.band { padding: var(--space-xl) 0 0; }
h2 {
  font-family: var(--font-display); font-size: var(--text-title);
  font-weight: 600; line-height: 1.25; margin-bottom: var(--space-md);
}
h1, h2 { min-width: 0; overflow-wrap: anywhere; }
.band-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-md); border-top: 2px solid var(--ink);
  padding-top: var(--space-sm); margin-bottom: var(--space-md);
}
.band-head h2 { margin-bottom: 0; }
.band-head .band-link { font-size: var(--text-sm); white-space: nowrap; }

/* ---- table shell: the page never scrolls sideways, a wide table does ---- */
.table-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  border-top: 1px solid var(--hairline);
}
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- ledger table (the homepage's coverage excerpt and the companies index) ----
   The issue and company pages have their own `.issue-table` register, one
   built by the shared table builder; `.ledger` is the register for the two
   pages that print a coverage list rather than a filing's figures. */
.ledger {
  border-collapse: collapse; width: 100%; min-width: 38rem;
  font-size: var(--text-sm); line-height: 1.4;
}
.ledger th {
  padding: var(--space-2xs) var(--space-sm) var(--space-3xs);
  border-bottom: 1px solid var(--hairline); font-size: var(--text-chip);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left; vertical-align: bottom; white-space: nowrap; color: var(--muted);
}
.ledger td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--ink);
}
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger th.num, .ledger td.num { text-align: right; }
.ledger td.num {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger .nowrap { white-space: nowrap; }
.ledger td.code { font-family: var(--font-data); font-weight: 600; white-space: nowrap; }
.ledger-foot {
  margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--muted);
  max-width: var(--measure-note);
}

/* ---- stat blocks: label under number, the site's one figure register ---- */
.statrow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg);
  margin-top: var(--space-lg); border-top: 1px solid var(--hairline);
  padding-top: var(--space-sm);
}
.stat-value {
  font-family: var(--font-data); font-size: var(--text-title); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--ink);
}
.stat-label {
  margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--muted);
  line-height: 1.4;
}
.stat-source {
  margin-top: var(--space-xs); font-family: var(--font-data);
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint);
}

/* ---- the one button the site has: accent as line, not fill ---- */
.button {
  display: inline-block; font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 600; line-height: 1.5; color: var(--accent); background: transparent;
  border: 1.5px solid var(--accent); border-radius: var(--radius-control);
  padding: var(--space-xs) var(--space-lg); text-decoration: none;
  white-space: nowrap; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 80ms var(--ease-out);
}
.button:hover { background: var(--accent); color: var(--accent-ink); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- footer ---- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-lg) 0 var(--space-2xl);
}
.footer p { font-size: var(--text-sm); color: var(--faint); max-width: var(--measure-note); }
.footer p + p { margin-top: var(--space-xs); }
.footer .disclaimer { color: var(--muted); }

/* ---- responsive: the masthead's phone collapse (the C spec's ≤480px state) ----
   Horizontal padding stays on .wrap so the masthead keeps the page's own left
   edge — the variants sheet used --space-md because its whole frame shrank
   together, which is an integration adaptation, not a design change. */
@media (max-width: 480px) {
  .masthead-row {
    flex-wrap: wrap; row-gap: var(--space-sm);
    padding-top: var(--space-sm); padding-bottom: var(--space-sm);
  }
  .c-tagline-x { display: none; }
  .c-nav { flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .c-link, .button { transition: none; }
  .button:active { transform: none; }
}