/*
 * Ohtsuji SANGO Compat
 * Gives the parts SANGO left inside the articles the Plain Frame 95 look.
 * Colours come from the theme's variables; the fallbacks keep it readable without the theme.
 */

:root {
  /* Articles saved with SANGO blocks still point at these. */
  --sgb-main-color: var(--accent, #000080);
  --wp--preset--color--sango-main: var(--accent, #000080);
  --wp--preset--color--sango-accent: var(--accent, #000080);
}

/* Font Awesome is not loaded: the icons carry no information, so they are not drawn. */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands, i[class^="fa-"], i[class*=" fa-"] { display: none; }

/* ---------- headings saved by the SANGO heading block ---------- */
.sgb-heading__inner { display: inline !important; background: none !important; border: 0 !important; padding: 0 !important; font-size: inherit !important; }
.sgb-heading__text { color: inherit !important; }
.entry .hh { text-align: left !important; }

/* ---------- timeline: [timeline][tl] and the timeline block ---------- */
.tl, .sgb-tl {
  margin: 0 0 0 6px; padding: 0 0 0 24px;
  border-left: 1px dotted var(--border-strong, #6b6b64);
  display: flex; flex-direction: column; gap: var(--s3, 12px);
}
.entry > .tl, .entry > .wp-block-sgb-timeline { margin-inline: auto; max-width: var(--measure, 42rem); padding-left: 0; border: 0; }
.entry > .wp-block-sgb-timeline > .sgb-tl, .entry > .tl { margin-left: 6px; padding-left: 24px; border-left: 1px dotted var(--border-strong, #6b6b64); }
.tl-content, .sgb-tl-item { position: relative; min-width: 0; }
.tl-content::before, .sgb-tl-item::before {
  content: ""; position: absolute; left: -29px; top: .62em; width: 9px; height: 9px;
  background: var(--surface, #fff); border: 1px solid var(--border-strong, #6b6b64);
}
.tl_marker, .sgb-tl-item__marker { display: none; }
.tl_label, .sgb-tl-item__label {
  display: inline; margin-right: var(--s2, 8px);
  font-family: var(--font-mono, monospace); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tl_title, .sgb-tl-item__title { display: inline; font-weight: 700; }
.tl_main, .sgb-tl-item__main { margin-top: .4em; min-width: 0; }
.tl_main > * + *, .sgb-tl-item__main > * + * { margin-top: .8em; }
.tl_main > :first-child, .sgb-tl-item__main > :first-child { margin-top: 0; }

/* ---------- framed boxes ---------- */
.sng-box, .memo, .sgb-box-simple { border: 1px solid var(--border-strong, #6b6b64); background: var(--surface, #fff); color: var(--text, #1a1a1a); }
.sng-box { padding: var(--s3, 12px) var(--s4, 16px); }
.sng-box > .box-content { padding: 0; }
.sng-box > .box-title, .memo_ttl {
  margin: calc(-1 * var(--s3, 12px)) calc(-1 * var(--s4, 16px)) var(--s3, 12px); padding: 2px var(--s4, 16px);
  background: var(--surface-2, #dcdcd6); border-bottom: 1px solid var(--border-strong, #6b6b64);
  font-family: var(--font-mono, monospace); font-size: .875rem; font-weight: 700; line-height: 1.8;
}
.sng-box > .box-title + .box-content > :first-child, .memo > :first-child:not(.memo_ttl), .sng-box > :first-child:not(.box-title):not(.box-content) { margin-top: 0; }
.sng-box p:last-child, .memo p:last-child { margin-bottom: 0; }
.memo { padding: var(--s3, 12px) var(--s4, 16px); background: var(--memo-bg, #fff8d6); border-color: var(--memo-border, #8a6d00); }
.memo .memo_ttl { background: var(--memo-bg, #fff8d6); border-bottom-color: var(--memo-border, #8a6d00); }
.memo.alert { background: var(--surface, #fff); border-color: var(--alert, #b3261e); }
.memo.alert .memo_ttl { background: var(--surface, #fff); border-bottom-color: var(--alert, #b3261e); color: var(--alert, #b3261e); }

/* box saved by the SANGO box block (white box with a coloured title) */
.sgb-box-simple { padding: 0; }
.sgb-box-simple__title {
  margin: 0; padding: 2px var(--s4, 16px) !important; text-align: left !important;
  background: var(--surface-2, #dcdcd6) !important; color: var(--text, #1a1a1a) !important;
  border-bottom: 1px solid var(--border-strong, #6b6b64);
  font-family: var(--font-mono, monospace); font-size: .875rem; font-weight: 700; line-height: 1.8;
}
.sgb-box-simple__body { padding: var(--s3, 12px) var(--s4, 16px) !important; background: transparent !important; border: 0 !important; color: inherit !important; }
.sgb-box-simple__body > :first-child { margin-top: 0; }
.sgb-box-simple__body > :last-child { margin-bottom: 0; }

/* ---------- link to another site ---------- */
.reference, .sgb-e-link {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--border-strong, #6b6b64); background: var(--surface, #fff);
  color: var(--text, #1a1a1a); text-decoration: none;
}
.reference .refttl {
  flex: none; display: flex; align-items: center; padding: var(--s2, 8px) var(--s3, 12px);
  background: var(--surface-2, #dcdcd6); border-right: 1px solid var(--border-strong, #6b6b64);
  font-family: var(--font-mono, monospace); font-size: .875rem; white-space: nowrap;
}
.reference .refcite { padding: var(--s2, 8px) var(--s3, 12px); min-width: 0; line-height: 1.6; }
.reference .refcite span, .sgb-e-link__sitename { display: block; color: var(--muted, #55554f); font-size: .875rem; }
.reference:hover .refcite, .sgb-e-link:hover .sgb-e-link__title { text-decoration: underline; }
.sgb-e-link { flex-direction: column; padding: var(--s2, 8px) var(--s3, 12px); }
.sgb-e-link__catchy { font-family: var(--font-mono, monospace); font-size: .875rem; color: var(--muted, #55554f); }
.sgb-e-link__title { font-weight: 700; }

/* ---------- links to other articles ---------- */
.linkto {
  display: flex; gap: var(--s3, 12px); align-items: flex-start; padding: var(--s2, 8px);
  border: 1px solid var(--border, #b8b8b0); background: var(--surface, #fff);
  color: var(--text, #1a1a1a); text-decoration: none;
}
.linkto .tbimg { flex: none; width: 120px; }
.linkto .tbimg img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--border, #b8b8b0); }
.linkto .tbtext { min-width: 0; font-weight: 700; line-height: 1.5; }
.linkto:hover .tbtext, .linkto:focus-visible .tbtext { background: var(--accent, #000080); color: var(--on-accent, #fff); }
.sng-link-time { display: block; font-family: var(--font-mono, monospace); font-size: .875rem; font-weight: 400; color: var(--muted, #55554f); }

.catpost-cards, .catpost-rows { display: grid; gap: var(--s4, 16px); grid-template-columns: 1fr; }
.c_linkto_wrap, .c_linkto_long { position: relative; min-width: 0; }
.c_linkto, .c_linkto:visited { display: grid; gap: var(--s2, 8px); color: var(--text, #1a1a1a); text-decoration: none; }
.c_linkto_img_wrap img, .longc_img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--border, #b8b8b0); }
.c_linkto_text { padding: 0 var(--s1, 4px); font-weight: 700; line-height: 1.5; }
.c_linkto:hover .c_linkto_text, .c_linkto:focus-visible .c_linkto_text { background: var(--accent, #000080); color: var(--on-accent, #fff); }
.c_linkto:hover .sng-link-time, .c_linkto:focus-visible .sng-link-time { color: inherit; }
.longc_linkto { grid-template-columns: 120px 1fr; gap: var(--s3, 12px); align-items: start; }
.longc_title { display: block; }
@container entry (min-width: 600px) {
  .catpost-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s5, 24px); }
  .catpost-rows { grid-template-columns: repeat(2, 1fr); gap: var(--s4, 16px) var(--s5, 24px); }
}
@container entry (min-width: 900px) {
  .catpost-cards { grid-template-columns: repeat(3, 1fr); }
}
.entry > :where(.catpost-cards, .catpost-rows, .c_linkto_long, .c_linkto_wrap) { max-width: 100%; }

/* ---------- buttons ---------- */
.center { text-align: center; }
.center > p { margin: 0; }
.entry > .center { max-width: 100%; }
.entry .btn.strong { font-weight: 700; }
.entry p > .btn { margin: var(--s1, 4px) 0; }

/* ---------- lists ---------- */
.list-title { font-weight: 700; margin-bottom: var(--s2, 8px); }
.ol-circle ol { list-style: none; counter-reset: ol; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2, 8px); }
.ol-circle ol > li { counter-increment: ol; position: relative; padding-left: 2.4em; }
.ol-circle ol > li::before {
  content: counter(ol); position: absolute; left: 0; top: .15em; width: 1.7em; height: 1.7em; display: grid; place-items: center;
  background: var(--accent, #000080); color: var(--on-accent, #fff);
  font-family: var(--font-mono, monospace); font-size: .875rem; line-height: 1;
}
.li-chevron ul, .li-yubi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1, 4px); border: 0; }
.li-chevron li, .li-yubi li { position: relative; padding-left: 1.4em; }
.li-chevron li::before { content: "▸"; position: absolute; left: 0; color: var(--accent-ink, #000080); }
.li-yubi li::before { content: "→"; position: absolute; left: 0; color: var(--accent-ink, #000080); }

/* ---------- tables ---------- */
.p95-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border-strong, #6b6b64); }
.p95-scroll table, .entry table { border-collapse: collapse; width: 100%; margin: 0; font-size: .9375rem; line-height: 1.6; }
.entry table:has(tr > :nth-child(4)) { min-width: 560px; }
.entry th, .entry td { border: 1px solid var(--border, #b8b8b0); padding: var(--s2, 8px) var(--s3, 12px); text-align: left; vertical-align: top; }
.entry th { background: var(--surface-2, #dcdcd6); color: var(--text, #1a1a1a); font-weight: 700; }
.entry td img { margin-inline: auto; }
.entry .fixed01 { position: sticky; left: 0; background: var(--surface-2, #dcdcd6); }
.entry .wp-block-table { margin-inline: auto; max-width: 100%; }
.entry .wp-block-table figcaption::before { content: none; }

/* ---------- images ---------- */
.entry .wp-block-image, .entry .wp-caption { max-width: 100%; margin-inline: auto; }
.entry .wp-block-image img, .entry img[class*="wp-image-"] { height: auto; }
.entry .is-style-sango-with-shadow img { border: 1px solid var(--border, #b8b8b0); }
.has-text-align-center { text-align: center; }
.entry .alignnone { margin-inline: auto; }

/* ---------- highlighter pens ---------- */
.keiko_yellow, .keiko_blue, .keiko_red { background: linear-gradient(transparent 55%, var(--mark, rgb(255 213 74 / .6)) 55%); }
.keiko_blue { --mark: rgb(120 180 255 / .55); }
.keiko_red { --mark: rgb(255 130 130 / .55); }
.keiko_yellow.keiko_blue { background: linear-gradient(transparent 55%, rgb(255 213 74 / .6) 55%); }

/* ---------- affiliate cards (Kaereba / Tomareba) ---------- */
.cstmreba, .kaerebalink-box, .booklink-box { max-width: var(--measure, 42rem); margin-inline: auto; padding: var(--s3, 12px); border: 1px solid var(--border, #b8b8b0); background: var(--surface, #fff); }
.cstmreba .tomarebalink-box, .cstmreba .kaerebalink-box { display: flex; gap: var(--s3, 12px); align-items: flex-start; width: 100%; }
.cstmreba .tomarebalink-image, .cstmreba .kaerebalink-image { flex: none; width: 80px; }
.cstmreba .tomarebalink-image img, .cstmreba .kaerebalink-image img { width: 100%; }
.cstmreba .tomarebalink-info, .cstmreba .kaerebalink-info { flex: 1; min-width: 0; }
.cstmreba .tomarebalink-name, .cstmreba .kaerebalink-name { font-weight: 700; line-height: 1.5; }
.cstmreba .tomarebalink-name p, .cstmreba .kaerebalink-name p { margin: 0; }
.cstmreba .tomarebalink-powered-date, .cstmreba .tomarebalink-address, .cstmreba .tomarebalink-powered-date a { color: var(--muted, #55554f); font-size: .875rem; }
.cstmreba .tomarebalink-link1, .cstmreba .kaerebalink-link1, .booklink-link2 { margin-top: var(--s2, 8px); display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
.cstmreba .tomarebalink-link1 > div, .cstmreba .kaerebalink-link1 > div, .booklink-link2 > div {
  min-height: var(--tap, 44px); display: flex; align-items: center; padding: 0 var(--s3, 12px);
  background: var(--surface-2, #dcdcd6); border: 1px solid var(--border-strong, #6b6b64); box-shadow: var(--bevel-raised, none);
  font-size: .9375rem; font-weight: 700;
}
.cstmreba .tomarebalink-link1 a, .cstmreba .kaerebalink-link1 a, .booklink-link2 a { color: var(--text, #1a1a1a); text-decoration: none; }
/* 1px tracking pixels that ride along with affiliate links */
.cstmreba img[height="1"], .cstmreba img[width="0"], .kaerebalink-name img, .tomarebalink-info img { display: none; }

/* ---------- the old front page (page "cyari") ---------- */
.openingtitle { margin: 0 auto; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.8; text-align: center; }
.openingimg { display: block; width: clamp(72px, 12vw, 120px); height: auto; margin: var(--s4, 16px) auto 0 !important; }
.openingcommnet { margin: var(--s3, 12px) auto var(--s5, 24px); font-size: clamp(1rem, .9rem + .6vw, 1.25rem); text-align: center; }
.widget-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); }
.widget-menu li { margin: 0; }
.widget-menu a, .widget-menu a:visited {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap, 44px); padding: 0 var(--s3, 12px);
  background: var(--surface-2, #dcdcd6); color: var(--text, #1a1a1a);
  border: 1px solid var(--border-strong, #6b6b64); box-shadow: var(--bevel-raised, none); text-decoration: none; text-align: center;
}
.widget-menu a:hover { background: var(--surface, #fff); }
.accbox label {
  display: flex; align-items: center; gap: var(--s3, 12px); min-height: var(--tap, 44px); padding: 0 var(--s3, 12px); cursor: pointer;
  background: var(--surface-2, #dcdcd6); border: 1px solid var(--border-strong, #6b6b64); box-shadow: var(--bevel-raised, none); font-weight: 700;
}
.accbox label::before {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px;
  border: 1px solid var(--border-strong, #6b6b64); background: var(--surface, #fff); font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
}
.accbox input.cssacc { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.accbox .accshow { display: none; padding: var(--s3, 12px); border: 1px solid var(--border, #b8b8b0); border-top: 0; }
.cssacc:checked + label + .accshow { display: block; }
.cssacc:checked + label::before { content: "−"; }
.cssacc:focus-visible + label { outline: 2px solid var(--focus, #b45309); outline-offset: 2px; }

.entry--front > p:first-child { display: none; }
.entry > :where(.accshow, .accbox) { max-width: var(--measure, 42rem); margin-inline: auto; }