/* Oyun kuralları (#/kurallar) and Geçmiş (#/gecmis, #/yayin-gecmisi). Linked after simple.css; tokens from theme.css. */

/* ---- Oyun kuralları: one table, a folding row per family ------------------------------------------------------------ */
.rules-toolbar{gap:12px}
.rules-toolbar .search{flex:1 1 320px;min-width:0;max-width:520px}
.rules-toolbar select{flex:0 1 auto;max-width:260px}
.rules-toolbar label.opt.rules-only{align-items:center;gap:8px;padding:0 12px;height:32px;font-size:var(--fs-2);color:var(--fg-2);white-space:nowrap}
.rules-toolbar label.opt.rules-only input{margin:0}
.rules-box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.rules-grid{table-layout:fixed}
.rules-grid th.rule-key{width:30%}
.rules-grid th.rule-value{width:16%}
.rules-grid th.rule-text{width:auto}
.rules-grid td{overflow-wrap:normal}
.rules-grid td.rule-key code{font-family:var(--mono);font-size:13px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.rules-grid .rule-cell{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.rules-grid .rule-cell .st{font-size:var(--fs-1);font-weight:500}
.rules-grid .rule-unit{color:var(--fg-3);font-size:var(--fs-1)}
.rules-grid .fixed{cursor:default;font-variant-numeric:tabular-nums}
.rule-lock{display:inline-flex;align-items:center;color:var(--fg-3);cursor:help}
.rule-lock:hover,.rule-lock:focus-visible{color:var(--fg-2)}
.rule-lock svg{display:block}
input.rule-input{width:120px;height:28px;padding:0 8px;font-variant-numeric:tabular-nums;text-align:right;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);color:var(--fg)}
input.rule-input:hover{border-color:var(--line-strong)}
input.rule-input:focus{border-color:var(--accent);outline:none}
input.rule-input.changed{background:var(--changed);border-color:var(--warn)}
.rules-grid td.rule-text{min-width:0}
.rules-grid .rule-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;color:var(--fg-2);cursor:help}
.rules-grid .rule-desc.dim{color:var(--fg-3);font-style:italic}
.rules-grid tr.fam-row>td{padding:0;height:auto;background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.rules-grid tr.fam-row:hover>td{background:var(--hover)}
.fam-toggle{display:flex;align-items:baseline;gap:8px;width:100%;padding:8px 12px;background:none;border:0;border-radius:0;color:var(--fg);font-weight:600;font-size:var(--fs-2);text-align:left;cursor:pointer}
.fam-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fam-caret{width:12px;color:var(--fg-3)}
.fam-name{font-family:var(--mono);font-size:13px}
.fam-toggle .cnt{color:var(--fg-3);font-weight:400}
.fam-title{color:var(--fg-2);font-weight:400}
.fam-dirty{margin-left:auto;color:var(--warn);font-weight:500}

/* ---- Geçmiş: one list, a row opens to its diff ------------------------------------------------------------------- */
.history-toolbar{justify-content:space-between}
.history-toolbar .filter{margin:0}
.hist-modes{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hist-modes a.btn{border:0;border-radius:0;margin:0}
.hist-modes a.btn+a.btn{border-left:1px solid var(--line)}
.hist-modes a.btn.on{background:var(--surface-2);color:var(--fg);box-shadow:inset 0 -2px var(--accent)}
table.hist-grid{table-layout:fixed}
.hist-grid th.hist-open{width:36px}
.hist-grid th.hist-when{width:118px}
.hist-grid th.hist-who{width:110px}
.hist-grid th.hist-what{width:auto}
.hist-grid th.hist-impact{width:20%}
.hist-grid th.hist-state{width:132px}
.hist-grid th.acts{width:200px}
.hist-grid td{overflow-wrap:normal}
.hist-grid td.hist-open{padding:0 0 0 8px}
.hist-grid td.hist-when{color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hist-grid td.hist-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-grid td.hist-impact .hist-line{color:var(--fg-2)}
.hist-grid tr.hist-row{cursor:pointer}
.hist-grid tr.hist-row.open>td{background:var(--surface-2)}
.hist-grid tr.hist-row.open>td:first-child{box-shadow:inset 3px 0 var(--brand)}
.hist-grid tr.hist-undone td.hist-what .hist-line{color:var(--fg-3);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.hist-more{width:24px;height:24px;padding:0;background:none;border:0;border-radius:var(--r);color:var(--fg-3);font-size:var(--fs-1);cursor:pointer}
.hist-more:hover{background:var(--hover);color:var(--fg)}
.hist-st{gap:6px}
.hist-st .icon{font-weight:700}
.hist-st.ok .icon{color:var(--ok)}
.hist-st.bad .icon{color:var(--bad)}
.hist-st.off .icon{color:var(--slate)}
.hist-st.ok{color:var(--fg)}
.hist-grid tr.sub.hist-sub>td{padding:12px 16px 16px 44px}
.hist-detail{display:flex;flex-direction:column;gap:8px;min-width:0}
.hist-reason{margin:0;color:var(--fg-2)}
table.hist-diff{width:auto;min-width:420px;max-width:100%;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.hist-diff th{position:static}
table.hist-diff td.hist-before{color:var(--fg-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}
table.hist-diff td.hist-after{color:var(--fg)}
.hist-kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0;font-size:var(--fs-1)}
.hist-kv dt{color:var(--fg-3)}.hist-kv dd{margin:0;overflow-wrap:anywhere}
.hist-lines{margin:0;padding-left:18px;color:var(--fg-2);font-size:var(--fs-1)}

/* phone width: the description / impact columns give way first */
@media (max-width:720px){
  .rules-grid th.rule-key{width:48%}.rules-grid th.rule-value{width:52%}
  .rules-grid th.rule-text,.rules-grid td.rule-text{display:none}
  .hist-grid th.hist-who,.hist-grid td.hist-who,.hist-grid th.hist-impact,.hist-grid td.hist-impact{display:none}
  .hist-grid th.acts{width:96px}.hist-grid th.hist-when{width:92px}
  .history-toolbar .filter{width:100%}
}