/* Extracted from pages/kana/advanced/kana-typography/index.html; edit the source CSS file directly. */
:root {
  --ak-accent: var(--shu);
  --ak-accent-light: var(--shu-light);
  --ak-accent-ghost: var(--shu-ghost);
}

/* Fullwidth vs Halfwidth comparison strip */
.typ-compare-strip {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--space-3);
  background: var(--ink-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.typ-fw {
  font-size: 28px;
  font-family: var(--font-display);
  color: var(--shu-light);
}
.typ-hw {
  font-size: 28px;
  font-family: var(--font-mono);
  color: var(--gold-light);
}
.typ-sep {
  color: var(--text-ghost);
  font-size: 12px;
}

/* Halfwidth grid */
.typ-hw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
}
.typ-hw-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-align: center;
}
.typ-hw-cell:hover,
.typ-hw-cell.active {
  border-color: var(--shu-light);
  background: var(--shu-ghost);
  transform: scale(1.04);
}
.typ-hw-char {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--shu-light);
  line-height: 1;
}
.typ-fw-equiv {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-light);
  line-height: 1;
}
.typ-hw-code {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-ghost);
}
.typ-hw-sound {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
}

/* Filter row */
.typ-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.typ-filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--ink-3);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.typ-filter-btn:hover {
  border-color: var(--shu-light);
  color: var(--shu-light);
}
.typ-filter-btn.active {
  background: var(--shu-ghost);
  border-color: var(--shu);
  color: var(--shu-light);
  font-weight: 700;
}

/* Receipt Reader */
.typ-receipt {
  background: #fff;
  color: #111;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2;
  max-width: 340px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid #ddd;
}
.typ-receipt-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px dashed #999;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.typ-receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.typ-receipt-row.highlight {
  color: #cc0000;
  font-weight: 700;
}
.typ-receipt-total {
  border-top: 2px solid #111;
  padding-top: 6px;
  margin-top: 6px;
  font-weight: 700;
  font-size: 14px;
}
.typ-receipt-hw {
  /* halfwidth katakana style */
  font-family: monospace;
}
.typ-receipt-footer {
  text-align: center;
  font-size: 10px;
  color: #666;
  border-top: 1px dashed #999;
  padding-top: 6px;
  margin-top: 8px;
}
.typ-receipt-tooltip {
  cursor: help;
  border-bottom: 1px dotted var(--shu);
  color: var(--shu-light);
  background: var(--shu-ghost);
  padding: 0 2px;
  border-radius: 2px;
}

/* Font comparison slider */
.typ-font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.typ-font-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  padding: var(--space-4);
  text-align: center;
}
.typ-font-name {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  margin-bottom: 8px;
}
.typ-font-sample {
  font-size: 36px;
  line-height: 1.5;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.typ-font-sample.gothic {
  font-family: var(--font-body);
}
.typ-font-sample.mincho {
  font-family: var(--font-display);
}
.typ-font-sample.mono {
  font-family: var(--font-mono);
}
.typ-font-note {
  font-size: 11px;
  color: var(--text-ghost);
  line-height: 1.5;
}
.typ-font-badge {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--ink-3);
  color: var(--text-ghost);
  margin-top: 4px;
}

/* Detail panel for halfwidth */
.typ-hw-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.typ-detail-col {
  background: var(--ink-3);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.typ-detail-char {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
}
.typ-detail-col.hw .typ-detail-char {
  font-family: var(--font-mono);
  color: var(--shu-light);
}
.typ-detail-col.fw .typ-detail-char {
  font-family: var(--font-display);
  color: var(--gold-light);
}
.typ-detail-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-ghost);
}