/* m-systems: /sistemler ve /hakkinda. Core tokens only. */
.sy-lead { margin: 0 0 .8rem; color: var(--soft); max-width: 76ch; }
.sy-h3 { margin: 1.3rem 0 .5rem; font-size: 1.1rem; color: var(--amber-hot); }
.sy-h3:first-child { margin-top: 0; }
.sy-group { margin-top: 1.4rem; }
.sy-prose { max-width: 76ch; }
.sy-links { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .6rem; }

/* rates strip */
.sy-strip-wrap { margin: 0 0 1.6rem; }
.sy-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.sy-tile { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; min-width: 0; background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-left: 3px solid var(--bronze);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sy-tile--hot { border-left-color: var(--amber); background: linear-gradient(160deg, rgba(255, 180, 84, .12), var(--panel)); }
.sy-tile__v { font: 400 1.5rem/1.15 var(--display); color: var(--amber-hot); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sy-tile__l { color: var(--mute); font-size: .85rem; }
.sy-strip__note { margin: .7rem 0 0; color: var(--mute); font-size: .88rem; max-width: 90ch; }

/* label / value rows */
.sy-rows { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.sy-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem .1rem; border-bottom: 1px solid var(--line); min-width: 0; scroll-margin-top: 1rem; }
.sy-row:target { background: var(--row-hover); }
.sy-row dt { color: var(--soft); min-width: 0; }
.sy-row__note { display: block; color: var(--mute); font-size: .82rem; }
.sy-row dd { margin: 0; text-align: right; color: var(--bone); font-variant-numeric: tabular-nums; flex: none; max-width: 55%; }

/* kingdoms */
.sy-empires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sy-empire { padding: 1rem 1.1rem; background: linear-gradient(170deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-top: 4px solid var(--bronze); min-width: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.sy-empire--shinsoo { border-top-color: var(--shinsoo); }
.sy-empire--chunjo { border-top-color: var(--chunjo); }
.sy-empire--jinno { border-top-color: var(--jinno); }
.sy-empire__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }
.sy-empire__emblem { flex: none; width: 64px; height: 64px; }
.sy-empire h3 { font-size: 1.3rem; }
.sy-empire--shinsoo h3 { color: var(--shinsoo-t); }
.sy-empire--chunjo h3 { color: var(--chunjo-t); }
.sy-empire--jinno h3 { color: var(--jinno-t); }
.sy-empire__start { margin: .1rem 0 0; color: var(--mute); font-size: .9rem; }
.sy-empire__text { margin: 0; color: var(--soft); font-size: .95rem; }

/* exp chart */
.sy-figure { margin: 0 0 1.2rem; }
.sy-figure figcaption { margin-top: .4rem; color: var(--mute); font-size: .88rem; }
.sy-chart { display: block; width: 100%; max-width: 860px; height: auto; background: var(--ink-2); border: 1px solid var(--line); }
.sy-chart__grid { stroke: var(--line); stroke-width: 1; }
.sy-chart__tick { stroke: var(--line-2); stroke-width: 1; }
.sy-chart__lab { fill: var(--mute); font: 11px var(--body); }
.sy-chart__area { fill: rgba(255, 180, 84, .12); }
.sy-chart__line { fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linejoin: round; }
.sy-chart__dot { fill: var(--amber-hot); stroke: var(--ink); stroke-width: 1.5; }

/* classes */
.sy-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sy-class { padding: 1rem 1.1rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-left: 3px solid var(--bronze); min-width: 0; }
.sy-class__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.sy-class__head h3 a { color: var(--amber-hot); text-decoration: none; }
.sy-class__head h3 a:hover { text-decoration: underline; }
.sy-class__br { margin: 0; color: var(--mute); font-size: .88rem; }
.sy-stats { margin: 0 0 .7rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .7rem; }
.sy-stats dt { color: var(--mute); font-size: .78rem; }
.sy-stats dd { margin: 0; font: 700 1.05rem var(--body); color: var(--bone); font-variant-numeric: tabular-nums; }
.sy-class__d { margin: 0; color: var(--soft); font-size: .92rem; }

/* alignment colours */
.sy-swatch { display: inline-block; width: .8rem; height: .8rem; border: 1px solid var(--line-2); vertical-align: -.1em; background: var(--faint); }
.sy-swatch--00ccff { background: #00ccff; } .sy-swatch--0090ff { background: #0090ff; } .sy-swatch--5c6eff { background: #5c6eff; }
.sy-swatch--9b9bff { background: #9b9bff; } .sy-swatch--ffffff { background: #fff; } .sy-swatch--cf7500 { background: #cf7500; }
.sy-swatch--eb5300 { background: #eb5300; } .sy-swatch--e30000 { background: #e30000; } .sy-swatch--ff0000 { background: #f00; }

/* feature checklist */
.sy-counts { margin: 0 0 .6rem; }
.sy-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; }
.sy-check { display: flex; gap: .6rem; padding: .6rem .8rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line-2); min-width: 0; scroll-margin-top: 1rem; }
.sy-check:target { background: var(--row-hover); }
.sy-check--good { border-left-color: #46793f; }
.sy-check--good .sy-check__ic { color: var(--good); }
.sy-check--amber { border-left-color: var(--amber-dim); }
.sy-check--amber .sy-check__ic { color: var(--amber); }
.sy-check--info .sy-check__ic { color: var(--info); }
.sy-check--muted { opacity: .85; }
.sy-check--muted .sy-check__ic { color: var(--faint); }
.sy-check__ic { flex: none; padding-top: .15rem; }
.sy-check__b { min-width: 0; }
.sy-check__t { font-weight: 600; color: var(--bone); display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.sy-check__t a { color: var(--link); }
.sy-check__n { margin: .2rem 0 0; color: var(--soft); font-size: .9rem; }

@media (max-width: 1100px) {
  .sy-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-empires { grid-template-columns: minmax(0, 1fr); }
  .sy-classes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sy-rows, .sy-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-row { flex-wrap: wrap; }
  .sy-row dd { max-width: 100%; text-align: left; }
}