/* Kalkulyator (kk-) va O'lchovlar ro'yxati (ol-) ekranlari. Faqat style.css tokenlari — qorong'i rejim o'zi ishlaydi. */

/* ───── umumiy: barmoq uchun ≥ 48 px ───── */
.kk .chips button,
.ol .chips button,
.kk .seg button,
.ol .seg button {
  min-height: 48px;
}
.kk .chips,
.ol .chips {
  margin: 0 0 10px;
}
.kk-opt {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
}
.kk-tool {
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy);
  font-weight: 700;
}
.kk-x {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  align-self: flex-end;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 18px;
}
.kk-x-gap {
  flex: 0 0 48px;
}
.kk-offscreen {
  position: fixed;
  left: -9999px;
  top: 0;
}
.kk button:focus-visible,
.ol button:focus-visible,
.ol summary:focus-visible,
.ol a:focus-visible,
.kk a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.kk a,
.ol a {
  color: var(--navy);
}
.kk .top a,
.ol .top a {
  color: inherit;
}
.kk input[type="checkbox"],
.ol input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--navy);
  flex: 0 0 auto;
}

/* ───── oyna (dialog) ───── */
.kk-dlg {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
}
.kk-dlg::backdrop {
  background: var(--scrim, rgba(10, 30, 20, 0.55)); /* ::backdrop eski brauzerda o'zgaruvchini meros olmaydi */
}
.kk-dlg h2 {
  margin-top: 0;
}
.kk-pick-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.kk-pick-list button {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  text-align: left;
}
.kk-pick-list b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.kk-pick-list span {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 14px;
  overflow-wrap: anywhere;
  text-align: right;
}

/* ───── kalkulyator ───── */
.kk-passed {
  margin: 8px 0 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--navy-soft);
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.kk-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
}
.kk-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 6px 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}
.kk-tile span {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.kk-tile[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}
.kk-ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.kk-ico .kf {
  fill: var(--navy-soft);
}
.kk-tile[aria-pressed="true"] .kk-ico .kf {
  fill: none;
}

.kk-panel {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 24px;
}
.kk-head {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.kk-head h2 {
  margin: 0 0 2px;
}
.kk-lead {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
}
.kk-dia {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ink-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.kk-dia .kf {
  fill: var(--navy-soft);
}
.kk-dia text {
  fill: var(--ink);
  stroke: none;
  font: 700 20px var(--sans);
  text-anchor: middle;
}
.kk-dia .kd-s {
  font-size: 16px;
  font-weight: 400;
  fill: var(--ink-2);
}
.kk-dia .kd-b {
  font-size: 24px;
}
.kk-dia .kd-a {
  stroke: var(--navy);
}
.kk-dia .kd-a2 {
  stroke: var(--navy);
  stroke-dasharray: 5 4;
}
.kk-dia .kd-p {
  fill: var(--navy);
  stroke: none;
}
.kk-dia .kd-hole {
  fill: var(--surface);
  stroke-dasharray: 4 3;
}
.kk-dia .kd-wall {
  stroke-width: 4;
  stroke-linejoin: round;
}
.kk-dia .kd-div {
  stroke-width: 5;
  stroke: var(--ink);
}

.kk-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0 6px;
}
.kk-tools [data-clear] {
  margin-left: auto;
  color: var(--ink-2);
}
/* amal tugmalari doim alohida qatorda, butun eni bo'yicha: tor ekranda ham sig'adi */
.kk-ops {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: 4px;
}
.kk-ops button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}
.kk-body {
  margin-top: 6px;
}
.kk-sub {
  font-size: 15px;
  margin: 12px 0 6px;
}
.kk-list {
  display: grid;
  gap: 0;
}
.kk-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}
.kk-row > .field,
.kk-row > .grid2 {
  flex: 1 1 auto;
  min-width: 0;
}
.kk-row-no {
  align-self: flex-end;
  margin-bottom: 22px;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 13px;
}
.kk-sign {
  flex: 0 0 48px;
  height: 48px;
  margin-bottom: 10px;
  border: 2px solid var(--ok);
  border-radius: 10px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.kk-sign.minus {
  border-color: var(--danger);
  background: var(--warn-soft);
  color: var(--danger);
}
.kk-add {
  margin: 0 0 8px;
  min-height: 48px;
}
.kk-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-weight: 600;
  cursor: pointer;
}
.kk-step button {
  width: 48px;
  height: 48px;
}
.kk-step output {
  min-width: 48px;
  font-size: 24px;
}

.kk-out {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--navy-soft);
}
.kk-res {
  display: block;
  min-height: 48px;
}
.kk-res p {
  margin: 0 0 4px;
}
.kk-big {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kk-big small {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-2);
}
.kk-line {
  color: var(--ink);
  font-size: 15px;
}
.kk-pieces {
  font-size: 18px;
}
.kk-wait {
  color: var(--ink-2);
}
.kk-res .warn,
.kk-res .ok-box {
  margin-top: 8px;
}
.kk-verdict {
  font-size: 17px;
}
.kk-conv {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.kk-conv th,
.kk-conv td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.kk-conv th {
  width: 35%;
  color: var(--ink-2);
  font-weight: 600;
}
.kk-conv td {
  font-size: 20px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.kk-copy {
  margin-top: 10px;
  min-height: 48px;
  border-style: solid;
  background: var(--surface);
}
.kk-copy:disabled {
  opacity: 0.5;
}
.kk-copied {
  display: block;
  min-height: 1.2em;
  margin-top: 4px;
  color: var(--ok);
  font-weight: 600;
  font-size: 14px;
}
.kk-formula {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.kk-formula code {
  font-size: 16px;
  font-weight: 700;
}
.kk-var {
  flex: 0 0 36px;
  height: 36px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
}
.kk-dcheck {
  margin: 4px 0 10px;
}
.kk-dcheck:empty {
  display: none;
}
.kk-edit .btn-big,
.kk-edit .btn-line,
.kk-cust-act .btn-line {
  margin: 0;
  min-height: 48px;
}

/* ───── o'lchovlar ro'yxati ───── */
.ol-capbox {
  margin: 8px 0 6px;
  padding: 12px;
  border: 2px solid var(--navy);
  border-radius: 14px;
  background: var(--surface);
}
.ol-cap {
  margin-bottom: 6px;
}
.ol-cap > span {
  font-size: 15px;
  color: var(--ink);
}
.ol-cap .tape {
  font-size: 30px;
  min-height: 64px;
}
.ol-curgrp {
  min-height: 48px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
}
.ol-live {
  margin: 6px 0 0;
  min-height: 1.3em;
  color: var(--ok);
  font-weight: 600;
  font-size: 15px;
}
.ol-live:empty {
  display: none;
}
.ol-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.ol-stats:empty {
  display: none;
}
.ol-stats b {
  color: var(--ink);
}

.ol-empty {
  text-align: center;
  padding: 8px 4px 16px;
}
.ol-empty .steps {
  text-align: left;
}
.ol-empty-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  color: var(--ink-2);
}
.ol-empty-svg .oe-body {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 2.5;
}
.ol-empty-svg .oe-screen,
.ol-empty-svg .oe-hit {
  fill: var(--navy-soft);
  stroke: var(--navy);
  stroke-width: 1.5;
}
.ol-empty-svg .oe-blade {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.ol-empty-svg .oe-btn {
  fill: var(--navy);
}
.ol-empty-svg .oe-plus {
  stroke: var(--on-navy);
  stroke-width: 3;
}
.ol-empty-svg .oe-arrow {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}
.ol-empty-svg .oe-line {
  stroke: var(--line);
  stroke-width: 4;
  stroke-linecap: round;
}
.ol-empty-svg text {
  fill: var(--ink);
  font: 700 11px var(--sans);
  text-anchor: middle;
}
.ol-empty-svg .oe-s {
  font-size: 9px;
  fill: var(--ink-2);
}

.ol-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.ol-tools .hint {
  margin: 0;
}

.ol-group {
  margin: 10px 0;
}
.ol-ghead {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
}
.ol-gtoggle {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--navy-soft);
  color: var(--ink);
  text-align: left;
}
.ol-chev {
  grid-row: span 2;
  transition: transform 0.2s;
}
.ol-gtoggle[aria-expanded="false"] .ol-chev {
  transform: rotate(-90deg);
}
.ol-gname {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ol-curtag {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--ok);
}
.ol-gsum {
  font-size: 13px;
  color: var(--ink-2);
}
.ol-menu {
  position: relative;
  flex: 0 0 48px;
}
.ol-menu summary {
  list-style: none;
  width: 48px;
  height: 100%;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--navy-soft);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.ol-menu summary::-webkit-details-marker {
  display: none;
}
.ol-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 6;
  width: min(270px, calc(100vw - 32px));
  display: grid;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.ol-menu-list button {
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.ol-menu-list button:disabled {
  color: var(--ink-2);
  opacity: 0.6;
}
.ol-gempty {
  margin: 0 0 8px;
}

.ol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ol-item {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.ol-item.sel {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy-soft);
}
.ol-item.open {
  border-color: var(--navy);
}
.ol-check {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  cursor: pointer;
}
.ol-ord {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  min-height: 1em;
}
.ol-main {
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  -webkit-touch-callout: none;
  user-select: none;
}
.ol-val {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ol-val small {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.ol-meta {
  font-size: 14px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ol-meta b {
  color: var(--ink);
}
.ol-used {
  flex: 0 0 56px;
  min-height: 64px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  font-weight: 800;
}
.ol-used[aria-pressed="true"] {
  background: var(--ok-soft);
  color: var(--ok);
}
.ol-item.used .ol-main {
  opacity: 0.55;
}
.ol-item.used .ol-val {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.ol-edit {
  flex: 1 0 100%;
  padding: 4px 12px 12px;
  border-top: 1px solid var(--line);
}
.ol-q {
  margin: 10px 0 6px;
  font-weight: 700;
}
.ol-ang-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 8px;
}
.ol-ang {
  flex: 0 0 110px;
}
.ol-ang input {
  text-align: center;
  font-weight: 700;
}
.ol-ang-row .chips {
  flex: 1 1 150px;
}
.ol-ang-row .tape-err {
  flex: 1 0 100%;
  margin: -6px 0 8px;
}
.ol-det {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 14px;
}
.ol-det dt {
  color: var(--ink-2);
  font-weight: 600;
}
.ol-det dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.ol-edit .grid2 .btn-line {
  min-height: 48px;
}

.ol-set {
  margin: 20px 0 12px;
}
.ol-set summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}

.ol-bar {
  padding-top: 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.ol-bar:empty {
  display: none;
}
.ol-bar-hint {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}
.ol-acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ol-acts-2 {
  grid-template-columns: 1fr;
}
.ol-acts-2 .btn-line {
  border-style: solid;
  background: var(--surface);
  min-height: 48px;
}
.ol-act {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}
.ol-act span {
  font-size: 17px;
}
.ol-act[data-sum] {
  background: var(--navy);
  color: var(--on-navy);
}
.ol-act[data-massdel] {
  border-color: var(--danger);
  color: var(--danger);
}
@media (max-width: 360px) {
  .ol-act {
    flex-direction: column;
    gap: 0;
    font-size: 13px;
  }
}
.ol-sum {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 2px solid var(--navy);
}
.ol-sum-big {
  margin: 0 0 6px;
  font-size: 18px;
}
.ol-sum-big b {
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}
.ol-sum-big small {
  color: var(--ink-2);
}
.ol-sum-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}
.ol-sum-grid dt {
  font-size: 12px;
  color: var(--ink-2);
}
.ol-sum-grid dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ol-glist {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.ol-glist .btn-line {
  border-style: solid;
  text-align: left;
  min-height: 48px;
  color: var(--ink);
}
.ol-glist .btn-line[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy-soft);
}
.ol-dlg .btn-big,
.ol-dlg .grid2 .btn-line {
  margin: 0;
  min-height: 48px;
}
.ol-dlg .seg {
  margin-bottom: 10px;
}
.ol-fprev {
  max-height: 40dvh;
  overflow: auto;
  margin-bottom: 12px;
}
.ol-fhead {
  margin: 0 0 6px;
}
.ol-prev {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ol-prev th,
.ol-prev td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.ol-prev th {
  font-size: 13px;
  color: var(--ink-2);
}
.ol-prev tr.bad td {
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .ol-chev {
    transition: none;
  }
}