/* Оформление инструмента «reg-cost».
 *
 * Раньше эта таблица лежала строкой в js/tools/reg-cost.js и вставлялась
 * через createElement('style') — ради этого в Content-Security-Policy
 * держали style-src 'unsafe-inline', то есть разрешали любой инлайновый
 * стиль на всех страницах пяти сайтов. Вынесено 27.07.2026.
 *
 * Файл подключается partial'ом tools.html только на странице своего
 * инструмента и с отпечатком содержимого в адресе (asset-url.html):
 * имя постоянное, кэш недельный.
 */

.rgc{font-size:15px;line-height:1.6}
.rgc fieldset{border:0;padding:0;margin:0 0 18px}
.rgc legend{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted,#5a5f66);padding:0;margin-bottom:8px}
.rgc-seg{display:flex;flex-wrap:wrap;gap:6px}
.rgc .rgc-seg button{margin:0;background:var(--color-paper,#fff)!important;color:var(--color-ink,#14161a)!important;border:1px solid var(--color-rule,#e4e2dd);font-size:14px;font-weight:500;padding:9px 14px;border-radius:8px;cursor:pointer}
.rgc .rgc-seg button[aria-pressed="true"]{background:var(--color-accent,#14624a)!important;color:#fff!important;border-color:var(--color-accent,#14624a)}
.rgc-grid{display:flex;flex-wrap:wrap;gap:12px}
.rgc-grid>div{flex:1 1 210px;min-width:0}
.rgc-check{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--color-rule,#e4e2dd)}
.rgc-check input[type=checkbox]{margin-top:4px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--color-accent,#14624a)}
.rgc-check label{font-weight:500}
.rgc-check .rgc-sub{font-size:13px;color:var(--color-muted,#5a5f66);font-weight:400;margin-top:2px}
.rgc-money{margin-top:6px;max-width:190px}
.rgc-out{margin-top:24px}
.rgc-label{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted,#5a5f66);margin-bottom:8px}
.rgc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-rule,#e4e2dd)}
.rgc-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--color-rule,#e4e2dd)}
.rgc-row .rgc-t{min-width:0}
.rgc-row .rgc-name{font-weight:500}
.rgc-row .rgc-why{font-size:12.5px;color:var(--color-muted,#5a5f66);margin-top:3px;line-height:1.45}
.rgc-row .rgc-v{font-family:var(--font-mono,monospace);font-weight:600;white-space:nowrap;text-align:right;flex:0 0 auto}
.rgc-row.zero .rgc-v{color:var(--color-accent,#14624a)}
.rgc-tag{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:1px 6px;margin-left:6px;white-space:nowrap;color:var(--color-muted,#5a5f66)}
.rgc-tag.market{color:#8a5a00}
.rgc-total{border:1px solid var(--color-accent,#14624a);border-left-width:3px;border-radius:10px;background:var(--color-paper,#fff);padding:16px;margin-top:16px}
.rgc-total .rgc-big{font-family:var(--font-mono,monospace);font-size:26px;font-weight:700;color:var(--color-accent,#14624a);line-height:1.1;word-break:break-word}
.rgc-total .rgc-cap{font-size:13px;color:var(--color-muted,#5a5f66);margin-top:4px}
.rgc-total .rgc-second{margin-top:12px;padding-top:12px;border-top:1px solid var(--color-rule,#e4e2dd);font-size:14.5px}
.rgc-panel{border:1px solid var(--color-rule,#e4e2dd);border-radius:10px;background:var(--color-paper,#fff);padding:14px 16px;margin-top:12px}
.rgc-panel p{margin:0 0 9px}
.rgc-panel p:last-child{margin-bottom:0}
.rgc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.rgc-table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
.rgc-table th{font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--color-muted,#5a5f66);border-bottom:1px solid var(--color-ink,#14161a);padding:6px 8px;font-weight:500}
.rgc-table td{border-bottom:1px solid var(--color-rule,#e4e2dd);padding:8px;vertical-align:top}
.rgc-table tr.on td{background:color-mix(in oklab, var(--color-accent,#14624a) 7%, white)}
.rgc-table td.num{font-family:var(--font-mono,monospace);white-space:nowrap}
.rgc-src{margin-top:18px;font-size:12.5px;color:var(--color-muted,#5a5f66);line-height:1.6}
.rgc-src li{margin-top:4px}
.rgc-warn{font-size:13px;color:#8a5a00;margin-top:6px}
@media (max-width:430px){
  .rgc .rgc-total .rgc-big{font-size:22px}
  .rgc .rgc-seg button{padding:8px 11px;font-size:13.5px}
}

/* Матрица способов на телефоне: карточки вместо прокрутки вбок.
   Пять колонок требуют 560 px, экран даёт 308 — две колонки уезжали за
   край, и понять, что таблица листается, было неоткуда. Подписи ячеек
   приходят из data-label, их ставит reg-cost.js. Тот же приём, что у
   markdown-таблиц темы (.md-cards в base.css) — здесь он повторён
   отдельно, потому что стили инструмента живут под своим id и правило
   темы их не перебивает. */
@media (max-width:640px){
  .rgc-scroll{overflow-x:visible}
  .rgc-table{display:block;min-width:0}
  .rgc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .rgc-table tbody{display:grid;gap:10px}
  .rgc-table tr{display:block;border:1px solid var(--color-rule,#e4e2dd)}
  .rgc-table tr.on{border-color:var(--color-accent,#14624a)}
  .rgc-table td{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
    gap:4px 12px;align-items:baseline;border:0;border-top:1px solid var(--color-rule,#e4e2dd);
    padding:9px 12px}
  .rgc-table td:first-child{grid-template-columns:minmax(0,1fr);border-top:0;font-weight:600}
  .rgc-table td[data-label]::before{content:attr(data-label);font-family:var(--font-mono,monospace);
    font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted,#5a5f66)}
  .rgc-table td:first-child::before{content:none}
}