/* SAKI SE calculator screens (forms and snapshots). Shared by the website and both apps. */
.sk-group { border: 1px solid #e3e0d5; border-radius: 16px; padding: 14px 14px 16px; margin: 12px 0; background: #fff; min-width: 0; }
.sk-legend { font-weight: 700; color: #0f4535; padding: 0 6px; font-size: 15px; }
.sk-note, .sk-help { font-size: 12.5px; color: #5e6862; line-height: 1.45; }
.sk-note { margin: 2px 0 10px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.sk-field { display: grid; gap: 4px; align-content: start; font-size: 13.5px; font-weight: 600; color: #17201c; margin: 0; }
.sk-label { line-height: 1.3; }
.sk-in { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; font-size: 16px; padding: 9px 11px; border: 1px solid #cfc8b6; border-radius: 10px; background: #fff; color: #17201c; min-width: 0; }
.sk-in:focus { outline: 2px solid #c6a56b; outline-offset: 1px; }
.sk-fixed { font-size: 14px; padding: 9px 2px; color: #17201c; }
.sk-trio { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(64px, 1fr)); gap: 6px 8px; align-items: center; }
.sk-th { font-size: 12px; font-weight: 700; color: #5e6862; text-transform: uppercase; letter-spacing: .04em; }
.sk-tl { font-size: 13.5px; font-weight: 600; color: #17201c; line-height: 1.3; }
.sk-scroll { overflow-x: auto; max-width: 100%; }
.sk-table { display: grid; gap: 6px; min-width: 560px; }
.sk-tr { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 6px; align-items: center; }
.sk-tr > :first-child { min-width: 150px; }
.sk-rl { font-size: 13px; font-weight: 600; color: #17201c; }
.sk-more { margin-top: 8px; background: none; border: 1px dashed #c9c2b0; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: #0f4535; cursor: pointer; }
/* the snapshot */
.sk-snap { background: #fff; border: 1px solid #e3e0d5; border-radius: 18px; padding: 16px; color: #17201c; }
.sk-kicker { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #86672e; }
.sk-sub { margin: 4px 0 0; font-size: 1.1rem; font-weight: 650; }
.sk-lead { margin: 4px 0 0; font-size: 13.5px; color: #5e6862; }
.sk-answer { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; display: grid; gap: 4px; font-size: 1.05rem; line-height: 1.35; }
.sk-alabel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.sk-answer.sk-good { background: #0f4535; color: #fff; } .sk-answer.sk-watch { background: #f3e6c9; color: #5a4413; } .sk-answer.sk-bad { background: #8a2f22; color: #fff; }
.sk-sec { margin-top: 16px; }
.sk-h { margin: 0 0 8px; font-size: .98rem; color: #0f4535; }
.sk-rows { display: grid; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 7.5rem); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid #efede5; font-size: 14px; }
.sk-rhead { font-size: 11.5px; font-weight: 700; color: #5e6862; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: #e3e0d5; }
.sk-rlabel { min-width: 0; }
.sk-rnote { display: block; font-size: 12.5px; color: #5e6862; margin-top: 3px; line-height: 1.45; font-weight: 400; }
.sk-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sk-v.sk-good { color: #1f7a4d; } .sk-v.sk-watch { color: #8a6420; } .sk-v.sk-bad { color: #a33a2a; }
.sk-v.sk-good::before, .sk-v.sk-watch::before, .sk-v.sk-bad::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: currentColor; }
.sk-aim { font-size: 12.5px; color: #5e6862; text-align: right; }
.sk-t { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.sk-t th, .sk-t td { padding: 7px 6px; border-bottom: 1px solid #efede5; text-align: right; vertical-align: top; }
.sk-t th:first-child { text-align: left; font-weight: 500; min-width: 150px; }
.sk-t tr:first-child th { font-size: 11.5px; color: #5e6862; text-transform: uppercase; letter-spacing: .04em; }
.sk-lines { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: #2b3530; }
.sk-foot { margin: 16px 0 0; font-size: 11.5px; color: #5e6862; line-height: 1.5; }
@media (max-width: 480px) { .sk-snap { padding: 14px 12px; } .sk-t { font-size: 12.5px; } .sk-t th, .sk-t td { padding: 6px 3px; } .sk-t th:first-child { min-width: 104px; } .sk-t tr:first-child th { font-size: 10.5px; letter-spacing: 0; } .sk-row { grid-template-columns: minmax(0, 1fr) auto; } .sk-aim { grid-column: 1 / -1; text-align: left; margin-top: -4px; } .sk-aim:empty { display: none; } .sk-trio { grid-template-columns: minmax(0, 1fr) repeat(3, 62px); } }