/* Compact Persian reference layout. The scientific grid intentionally remains LTR. */
body.reference-table {
  --bg: #f0f5f7;
  --surface: #fff;
  --text: #1c2930;
  --muted: #53636d;
  --line: #c6d0d6;
  --accent: #176caa;
  --hover: #e3edf4;
  background: var(--bg);
  font-size: 13px;
  font-weight: 400;
}
body.reference-table [hidden] { display: none !important; }
body.reference-table button,
body.reference-table input,
body.reference-table select { border-radius: 2px; }
body.reference-table .topbar {
  min-height: 52px;
  height: 52px;
  padding: 0 max(16px, calc((100vw - 1576px) / 2));
  gap: 26px;
  border-bottom: 1px solid #bfc9cf;
  background: var(--surface);
}
body.reference-table .brand { font-size: 21px; font-weight: 750; gap: 8px; }
body.reference-table .brand small { font-size: 9px; margin: 0; }
body.reference-table .brand-icon { width: 30px; height: 34px; font-size: 23px; border-radius: 1px; }
body.reference-table .tabs { gap: 3px; align-items: stretch; }
body.reference-table .tabs button {
  padding: 0 13px;
  color: #53616c;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  background: transparent;
}
body.reference-table .tabs button span { font-size: 21px; margin-left: 5px; }
body.reference-table .tabs button.active { border-bottom-color: var(--accent); color: var(--accent); background: transparent; }
body.reference-table .header-actions { align-items: center; gap: 3px; }
body.reference-table .header-actions > button { min-width: 27px; height: 30px; padding: 2px 5px; font: 22px PersianDigits,Arial,sans-serif; color: #577890; }
body.reference-table .header-actions button span { font-size: 10px; font-family: IRANSansX,Tahoma,sans-serif; }
body.reference-table .layout-switch { display: flex; direction: ltr; gap: 0; border: 1px solid #aabac5; border-radius: 4px; overflow: hidden; }
body.reference-table .layout-switch button { padding: 1px 6px; width: 29px; height: 27px; font: 20px PersianDigits,Arial,sans-serif; border: 0; border-radius: 0; background: #ecf2f6; color: #7a96ac; }
body.reference-table .layout-switch button[aria-pressed=true] { background: #327bbb; color: #fff; }
body.reference-table .utilitybar { max-width: 1600px; margin: auto; padding: 9px 12px; gap: 15px; border: 0; font-size: 11px; }
body.reference-table .search-wrap { height: 32px; border-radius: 3px; width: 285px; }
body.reference-table .display-options { gap: 15px; }
body.reference-table .workspace { max-width: 1600px; padding: 18px 16px 0; gap: 18px; grid-template-columns: 270px minmax(0,1fr); }
body.reference-table .workspace.top-layout { max-width: 1160px; grid-template-columns: minmax(0,1fr); }
body.reference-table .detail { border: 0; border-radius: 0; background: transparent; overflow: visible; position: relative; }
body.reference-table .top-layout .detail { display: grid; grid-template-columns: 192px minmax(0,1fr); column-gap: 20px; min-height: 204px; }
body.reference-table .element-heading { background: transparent; color: var(--text); padding: 5px 10px 40px; border: 0; min-height: 202px; }
body.reference-table .top-layout .element-heading { grid-column: 1; grid-row: 1; }
body.reference-table .element-heading .atomic { font: 27px/1 PersianDigits,Arial,sans-serif; left: auto; right: 10px; top: 5px; }
body.reference-table .element-heading .symbol { font: 700 74px/1 PersianDigits,Arial,sans-serif; text-align: left; padding-top: 4px; }
body.reference-table .element-heading h1 { margin: 4px 0 1px; font-size: 24px; font-weight: 550; text-align: left; line-height: 1.5; }
body.reference-table .element-heading .en { display: block; text-align: left; color: var(--muted); font: 11px/1.5 PersianDigits,Arial,sans-serif; }
body.reference-table .element-heading .mass { top: 37px; bottom: auto; left: auto; right: 10px; font: 14px PersianDigits,Arial,sans-serif; direction: ltr; }
body.reference-table .element-heading .mass small { font-size: 10px; }
body.reference-table .element-heading .category-tag { top: 61px; left: auto; right: 10px; font-size: 9px; border: 0; padding: 0; color: var(--muted); max-width: 96px; }
body.reference-table .element-nav { padding: 0; height: 27px; border: 0; align-items: center; gap: 0; }
body.reference-table .top-layout .element-nav { position: absolute; right: 0; bottom: 6px; width: 192px; }
body.reference-table .element-nav button { padding: 3px 4px; font-size: 9px; min-height: 26px; background: transparent; }
body.reference-table .element-nav button:first-child,
body.reference-table .element-nav button:last-child { font: 16px PersianDigits,Arial,sans-serif; }
body.reference-table .detail #detail-content { max-height: none; overflow: visible; }
body.reference-table .top-layout #detail-content {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6,34px);
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0 14px;
  max-height: none;
  align-content: start;
}
body.reference-table .property-line { min-width: 0; display: flex; align-items: center; position: relative; border-bottom: 1px solid #b9c6ce; gap: 3px; }
body.reference-table .prop-row { min-width: 0; min-height: 34px; height: 34px; padding: 0 2px; gap: 5px; border-bottom: 1px solid #b9c6ce; font-size: 11px; line-height: 1.5; align-items: center; color: var(--text); }
body.reference-table .property-line > .prop-row { border-bottom: 0; flex: 1; width: auto; }
body.reference-table .prop-row > span:first-child { min-width: 0; white-space: nowrap; }
body.reference-table .prop-row .value { font: 12px PersianDigits,Arial,IRANSansX,Tahoma,sans-serif; gap: 3px; margin-right: auto; flex-shrink: 1; white-space: nowrap; justify-content: flex-end; }
body.reference-table .prop-row small { font: 9px PersianDigits,Arial,sans-serif; }
body.reference-table .prop-row.active { background: transparent; box-shadow: none; color: var(--accent); }
body.reference-table .prop-row.active > span:first-child { font-weight: 700; }
body.reference-table .prop-row:hover { background: #dbe8ef; }
body.reference-table .property-variant { max-width: 85px; padding: 1px 0; font-size: 10px; border: 0; border-radius: 0; background: transparent; color: var(--muted); min-height: 25px; }
body.reference-table .property-line:has(.property-variant) .prop-row > span:first-child { max-width: 89px; overflow: hidden; text-overflow: ellipsis; }
body.reference-table #detail-content > .detail-note { display: none; }
body.reference-table .more-properties { display: none; }
body.reference-table .table-area { min-width: 0; }
body.reference-table .mobile-detail { display: none; }
body.reference-table .control-strip { min-height: 40px; padding: 0 0 6px; gap: 8px; flex-wrap: nowrap; font-size: 11px; }
body.reference-table .control-strip label { gap: 5px; white-space: nowrap; }
body.reference-table .control-strip input,
body.reference-table .control-strip select { font-size: 11px; padding: 2px 4px; height: 27px; }
body.reference-table .control-strip .property-picker { max-width: 150px; }
body.reference-table .temperature-number { width: 64px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-family: PersianDigits,Arial,sans-serif; }
body.reference-table .temperature-slider { appearance: none; -webkit-appearance: none; flex: 1; width: 100%; min-width: 100px; height: 11px !important; padding: 0 !important; border: 1px solid #adc0ca; border-radius: 0; background: linear-gradient(90deg,#c9e2ec 0%,#e4edf0 20%,#f2ead8 48%,#f7b594 72%,#dc5346 100%); margin: 0; }
body.reference-table .temperature-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 9px; height: 21px; background: #fff; border: 1px solid #557086; border-radius: 2px; box-shadow: 0 1px 2px #152f4840; cursor: ew-resize; }
body.reference-table .temperature-slider::-moz-range-thumb { width: 8px; height: 19px; background: #fff; border: 1px solid #557086; border-radius: 2px; cursor: ew-resize; }
body.reference-table .temperature-readouts { display: flex; direction: ltr; gap: 8px; align-items: center; font: 12px PersianDigits,Arial,sans-serif; white-space: nowrap; }
body.reference-table .temperature-readouts button { padding: 2px 3px; background: transparent; border: 0; font: inherit; }
body.reference-table .temperature-readouts button[aria-pressed=true] { color: var(--text); border-bottom: 1px solid #8ba3b5; }
body.reference-table .temperature-step { border: 0; background: transparent; font: 20px PersianDigits,Arial,sans-serif; padding: 0 2px; min-width: 15px; }
body.reference-table .control-strip .text-button { font-size: 10px; padding: 3px; white-space: nowrap; }
body.reference-table .table-scroll { padding: 0 2px 6px; overflow: auto; border: 0; border-radius: 0; }
body.reference-table .periodic-grid {
  min-width: 0;
  grid-template-columns: 17px repeat(18,minmax(0,1fr));
  grid-template-rows: 17px repeat(7,72px) 20px repeat(2,72px);
  gap: 2px;
}
body.reference-table .group-label,
body.reference-table .period-label { font: 11px PersianDigits,Arial,sans-serif; color: #465662; }
body.reference-table .element { display: grid; grid-template-rows: 30px minmax(20px,1fr) 12px; padding: 2px; border: 1px solid #727b7960; border-radius: 0; align-items: center; justify-items: center; color: #111; transition: opacity .12s; }
body.reference-table .element[aria-pressed=true] { color: #111; border-color: #727b7960; }
body.reference-table .element:hover { transform: none; box-shadow: 0 0 0 2px #244d6c; }
body.reference-table .element.selected { outline: 2px solid #2276b9; outline-offset: 0; }
body.reference-table .element .z { position: absolute; top: 2px; left: 3px; font: 9px/10px PersianDigits,Arial,sans-serif; height: 10px; }
body.reference-table .element .sym { font: 700 25px/26px PersianDigits,Arial,sans-serif; letter-spacing: -.6px; width: 100%; padding-top: 6px; text-align: center; }
body.reference-table .element .fa { display: block; font-size: 13px; line-height: 20px; min-height: 20px; margin: 0; width: 100%; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
body.reference-table .element .val { font: 10px/11px PersianDigits,Arial,IRANSansX,sans-serif; height: 11px; margin: 0; text-align: left; }
body.reference-table .element .sym.gas { color: #c4122b; }
body.reference-table .element .sym.liquid { color: #155acb; }
body.reference-table .element .sym.unknown { color: #707579; }
body.reference-table .series-placeholder { background: #dce8f8; border: 1px solid #9fbada; border-radius: 0; font: 16px/1.5 PersianDigits,Arial,sans-serif; color: #205ca0; position: relative; }
body.reference-table .series-placeholder span { font-size: 24px; line-height: 1; }
body.reference-table .table-key { grid-column: 3; grid-row: 2; align-self: stretch; direction: rtl; text-align: right; color: var(--muted); padding: 2px 0; font-size: 8px; line-height: 16px; display: flex; flex-direction: column; justify-content: space-between; }
body.reference-table .mass-note { grid-column: 5/-1; grid-row: 9; direction: rtl; text-align: center; align-self: center; font-size: 9px; color: var(--muted); margin: 0; }
body.reference-table .legend { grid-column: 4/14; grid-row: 2/5; min-width: 0; padding: 11px 13px 20px; gap: 8px; align-self: stretch; justify-content: center; }
body.reference-table .legend-title { font-size: 11px; font-weight: 400; color: var(--muted); align-items: center; }
body.reference-table .legend-title button { font-size: 9px; }
body.reference-table .legend-body { display: flex; gap: 15px; align-items: center; direction: ltr; }
body.reference-table .legend:has(> .state-key) { flex-direction: row; align-items: center; gap: 16px; direction: ltr; }
body.reference-table .state-key { display: grid; grid-template-columns: 21px max-content; gap: 4px 7px; align-items: center; font-size: 10px; direction: ltr; flex-shrink: 0; }
body.reference-table .state-key > div { display: contents; }
body.reference-table .state-key .state-symbol,
body.reference-table .state-key b,
body.reference-table .state-key strong { display: inline-grid; place-items: center; width: 21px; height: 23px; border: 1px solid #8495a060; font: 700 19px PersianDigits,Arial,sans-serif; background: var(--surface); }
body.reference-table .state-key span:not(.state-symbol) { direction: rtl; text-align: right; }
body.reference-table .state-key .solid { color: #111; }
body.reference-table .state-key .liquid { color: #155acb; }
body.reference-table .state-key .gas { color: #c4122b; }
body.reference-table .state-key .unknown { color: #707579; }
body.reference-table .series-key { flex: 1; min-width: 0; }
body.reference-table .series-map { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); grid-template-rows: 24px 37px 37px; gap: 3px; direction: ltr; width: 100%; }
body.reference-table .series-head { font-size: 11px; display: flex; justify-content: center; align-items: center; color: #384d5b; border: 1px solid #aabac6; background: #e6eef6; }
body.reference-table .series-head.metals { grid-column: 1/6; grid-row: 1; }
body.reference-table .series-head.nonmetals { grid-column: 7/9; grid-row: 1; }
body.reference-table .series-map button { min-width: 0; padding: 2px; background: var(--cat); border: 1px solid #8d969060; border-radius: 0; font-size: 9px; line-height: 1.7; color: #18242c; direction: rtl; overflow-wrap: normal; }
body.reference-table .series-map button.active { outline: 2px solid var(--accent); outline-offset: 0; }
body.reference-table .series-map .cat-alkali { grid-column: 1; grid-row: 2/4; }
body.reference-table .series-map .cat-alkaline { grid-column: 2; grid-row: 2/4; }
body.reference-table .series-map .cat-lanthanoid { grid-column: 3; grid-row: 2; }
body.reference-table .series-map .cat-actinoid { grid-column: 3; grid-row: 3; }
body.reference-table .series-map .cat-transition { grid-column: 4; grid-row: 2/4; }
body.reference-table .series-map .cat-post { grid-column: 5; grid-row: 2/4; }
body.reference-table .series-map .cat-metalloid { grid-column: 6; grid-row: 1/4; }
body.reference-table .series-map .cat-reactive { grid-column: 7; grid-row: 2/4; }
body.reference-table .series-map .cat-noble { grid-column: 8; grid-row: 2/4; }
body.reference-table .category-grid { gap: 4px; }
body.reference-table .category-grid button { font-size: 10px; padding: 3px; min-height: 31px; border-radius: 0; }
body.reference-table .legend .preview-line { font-size: 12px; }
body.reference-table .heat-legend { border-radius: 0; height: 16px; margin: 3px 0; }
body.reference-table .small-note { font-size: 10px; }
body.reference-table .color-controls { font-size: 9px; flex-wrap: nowrap; }
body.reference-table .table-caption { font-size: 10px; margin: 0 19px 14px; line-height: 1.7; }
body.reference-table .explorer { padding-top: 13px; margin-top: 5px; }
body.reference-table .explorer h2 { font-size: 17px; }
body.reference-table .property-summary p,
body.reference-table .panel p { font-size: 12px; }
body.reference-table .panel { border-radius: 3px; box-shadow: none; }
body.reference-table footer { max-width: 1568px; margin: 25px 16px 0; padding: 18px 0 28px; font-size: 11px; align-items: flex-start; border-color: #c1cdd5; }
body.reference-table .footer-groups { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 25px; width: 100%; }
body.reference-table .footer-groups > div,
body.reference-table .footer-groups > section,
body.reference-table .footer-groups nav { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
body.reference-table .footer-groups h2,
body.reference-table .footer-groups h3,
body.reference-table .footer-groups strong { font-size: 13px; color: var(--text); font-weight: 650; margin: 0 0 4px; }
body.reference-table footer a,
body.reference-table footer button { font-size: 11px; }
body.reference-table .workspace:not(.top-layout) .element-heading { min-height: 180px; }
body.reference-table .workspace:not(.top-layout) #detail-content { padding-top: 6px; }
body.reference-table .workspace:not(.top-layout) .prop-row { min-height: 29px; height: 29px; font-size: 12px; }
body.reference-table .workspace:not(.top-layout) .property-variant { font-size: 10px; max-width: 95px; }
body.reference-table .workspace:not(.top-layout) .periodic-grid { min-width: 900px; }
body.reference-table .workspace.hide-panel { grid-template-columns: minmax(0,1fr); }
body.reference-table .workspace.hide-panel .detail { display: none; }
body.reference-table.dark { --bg: #15232f; --surface: #1a2c3b; --text: #e1ebf3; --muted: #a6b9c8; --line: #466073; --accent: #7bbdf0; --hover: #294a62; }
body.reference-table.dark .element { background: var(--cell-dark,var(--cell)); color: #fff; filter: none; border-color: #cbd9e42d; }
body.reference-table.dark .element[aria-pressed=true] { background: var(--cell-dark,var(--cell)); color: #fff; }
body.reference-table.dark .element-heading,
body.reference-table.dark .category-grid button { filter: none; }
body.reference-table.dark .element-heading { background: transparent; color: var(--text); }
body.reference-table.dark .element .sym.gas,
body.reference-table.dark .state-key .gas { color: #ff7894; }
body.reference-table.dark .element .sym.liquid,
body.reference-table.dark .state-key .liquid { color: #82b6ff; }
body.reference-table.dark .element .sym.unknown,
body.reference-table.dark .state-key .unknown { color: #b1bac0; }
body.reference-table.dark .state-key .solid { color: #fff; }
body.reference-table.dark .group-label,
body.reference-table.dark .period-label { color: #a5bacb; }
body.reference-table.dark .prop-row:hover { background: #244155; }
body.reference-table.dark .property-line,
body.reference-table.dark .prop-row { border-color: #4b6272; }
body.reference-table.dark .series-map button { background: var(--cat-dark,var(--cat)); color: #fff; }
body.reference-table.dark .series-head,
body.reference-table.dark .series-placeholder { background: #263f58; color: #b8d5f2; border-color: #6989a7; }
body.reference-table.dark .tabs button { color: #b2c2ce; }
body.reference-table.dark .tabs button.active { color: var(--accent); }

/* Reference interactions: a compact scientific surface with restrained motion. */
body.reference-table .table-area { background: var(--surface); border: 1px solid #cbd5dc; padding: 11px 11px 7px; }
body.reference-table .group-label,
body.reference-table .period-label { border: 0; background: transparent; border-radius: 0; padding: 0; min-width: 0; }
body.reference-table .group-label { cursor: default; }
body.reference-table .group-label:hover,
body.reference-table .period-label:hover { color: var(--accent); background: var(--hover); }
body.reference-table .element-heading { background: var(--element-bg); color: #172731; border: 1px solid #60768260; margin: 4px 4px 0; padding: 30px 12px 48px; min-height: 184px; }
body.reference-table .workspace:not(.top-layout) .element-heading { min-height: 184px; }
body.reference-table .element-heading .atomic { font: 23px/1 PersianDigits,Arial,sans-serif; top: 9px; left: 11px; right: auto; }
body.reference-table .element-heading .symbol { font: 700 71px/1 PersianDigits,Arial,sans-serif; padding: 6px 0 0; text-align: left; }
body.reference-table .element-heading h1 { position: absolute; right: 12px; bottom: 24px; margin: 0; font-size: 24px; text-align: right; }
body.reference-table .element-heading .en { position: absolute; right: 12px; bottom: 10px; color: #345263; font-size: 11px; }
body.reference-table .element-heading .mass { position: absolute; bottom: 12px; left: 11px; right: auto; top: auto; font: 15px/1 PersianDigits,Arial,sans-serif; }
body.reference-table .element-heading .category-tag { top: 10px; right: 10px; color: #345263; font-size: 10px; max-width: none; }
body.reference-table .element .fa { font-size: 13px; }
body.reference-table .element .val { font-size: 10.5px; height: 12px; line-height: 12px; }
body.reference-table .series-map button { font-size: 11px; line-height: 1.5; }
body.reference-table .element { transition: opacity 150ms ease, transform 120ms ease, box-shadow 120ms ease, background-color 140ms linear; transform-origin: center; }
body.reference-table .element:hover { transform: scale(1.035); z-index: 6; box-shadow: 0 0 0 2px #244d6c; }
body.reference-table .element:active { transform: scale(.98); }
body.reference-table .tabs button { transition: color 130ms ease, background-color 130ms ease, border-color 180ms ease; }
body.reference-table .tabs button:hover { background: var(--hover); }
body.reference-table .tabs button:active { background: #c5dbe9; }
body.reference-table .property-line { transition: background-color 130ms ease; }
body.reference-table .property-line.active { border-bottom-color: var(--accent); }
body.reference-table .property-line:has(.property-variant) > .prop-row { width: 100%; }
body.reference-table .property-line:has(.property-variant) .prop-row > span:first-child { width: 42px; max-width: 42px; flex-shrink: 0; margin-left: 89px; }
body.reference-table .property-line > .property-variant { position: absolute; right: 47px; width: 85px; max-width: 85px; top: 50%; transform: translateY(-50%); color: var(--text); }
body.reference-table .property-line .value { min-width: 0; }
body.reference-table .article-link { color: var(--accent); font-size: 11px; margin-right: auto; }
body.reference-table .heading-shells { position: absolute; right: 12px; top: 35px; font: 11px/12px PersianDigits,Arial,sans-serif; color: #345263; text-align: center; }
body.reference-table .element-heading .symbol.gas { color: #c4122b; }
body.reference-table .element-heading .symbol.liquid { color: #155acb; }
body.reference-table .element-heading .symbol.unknown { color: #707579; }
body.reference-table .temperature-title { padding: 1px 4px; border: 0; background: transparent; font-size: 11px; color: var(--muted); }
body.reference-table .temperature-readout { display: flex; flex: 0 0 auto; direction: ltr; gap: 2px !important; font: 12px PersianDigits,Arial,sans-serif; }
body.reference-table .temperature-readout input { width: 50px; padding: 1px 0; border: 0; border-bottom: 1px solid #9eb1bf; background: transparent; border-radius: 0; text-align: right; font: 12px PersianDigits,Arial,sans-serif; appearance: textfield; -moz-appearance: textfield; }
body.reference-table .temperature-readout input::-webkit-inner-spin-button,
body.reference-table .temperature-readout input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.reference-table .temperature-readout span { min-width: 16px; }
body.reference-table .state-key { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 80px; }
body.reference-table .state-key > button { display: flex; align-items: center; justify-content: center; height: 28px; border: 1px solid var(--phase-color); border-radius: 5px; padding: 2px 8px; background: var(--phase-color); font-size: 11px; font-weight: 700; text-align: center; direction: rtl; color: #fff; }
body.reference-table .state-key > button[data-phase=solid] { --phase-color: #263746; }
body.reference-table .state-key > button[data-phase=liquid] { --phase-color: #155acb; }
body.reference-table .state-key > button[data-phase=gas] { --phase-color: #b5122b; }
body.reference-table .state-key > button[data-phase=unknown] { --phase-color: #606a73; }
body.reference-table .state-key > button[aria-pressed=true] { outline: 2px solid var(--text); outline-offset: 2px; box-shadow: inset 0 0 0 2px #fff; }
body.reference-table .state-key > button:hover { box-shadow: inset 0 0 0 2px #ffffffb3; }
body.reference-table .state-key > button:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
body.reference-table .legend-reset { display: block; padding: 3px 0 0; margin-right: auto; border: 0; background: transparent; color: var(--accent); font-size: 9px; }
body.reference-table .property-key { width: 100%; max-width: 460px; margin: auto; display: grid; gap: 5px; }
body.reference-table .property-key .preview-line { font-size: 18px; direction: ltr; text-align: center; }
body.reference-table .property-key .preview-line .numeric { font-size: 11px; }
body.reference-table .scale-choice { display: flex; justify-content: center; gap: 3px; }
body.reference-table .scale-choice button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 10px; padding: 2px 7px; background: transparent; color: var(--muted); }
body.reference-table .scale-choice button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
body.reference-table .electron-key { display: grid; grid-template-columns: minmax(0,1fr) 144px; grid-template-rows: min-content min-content min-content; align-content: center; align-items: center; gap: 11px 18px; width: 100%; min-width: 0; }
body.reference-table .electron-key > .legend-title { grid-column: 1; font-size: 12px; }
body.reference-table .electron-key > .preview-line { grid-column: 1; word-break: normal; overflow-wrap: anywhere; font: 15px/1.9 PersianDigits,Arial,sans-serif; text-align: left; }
body.reference-table .orbital-ladder { display: grid; grid-column: 2; grid-row: 1/4; grid-template-columns: repeat(4,34px); grid-template-rows: repeat(7,18px); gap: 2px; direction: ltr; }
body.reference-table .orbital-ladder button { border: 1px solid #acbdc980; border-radius: 1px; font: 11px/14px PersianDigits,Arial,sans-serif; padding: 0; color: #78909f; background: transparent; transition: transform 100ms ease, box-shadow 100ms ease; }
body.reference-table .orbital-ladder button[data-orbital=s].occupied { background: #b9dcf0; color: #164463; }
body.reference-table .orbital-ladder button[data-orbital=p].occupied { background: #b8e3c4; color: #205638; }
body.reference-table .orbital-ladder button[data-orbital=d].occupied { background: #f1d2b4; color: #754317; }
body.reference-table .orbital-ladder button[data-orbital=f].occupied { background: #e3c7ee; color: #583773; }
body.reference-table .orbital-ladder button:hover,
body.reference-table .orbital-ladder button:focus-visible { transform: scale(1.07); z-index: 1; box-shadow: 0 0 0 1px var(--accent); }
body.reference-table .orbital-ladder sup { font-size: 8px; margin-left: 1px; }
body.reference-table .block-key { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1; }
body.reference-table .block-key button { font-size: 10px; padding: 3px 8px; border-color: #9eb6c6; background: transparent; }
body.reference-table .legend-isotopes { padding: 3px 8px 3px 12px; overflow: hidden; }
body.reference-table .isotope-stage { width: 100%; min-width: 0; align-self: center; }
body.reference-table .isotope-stage .legend-title { height: 20px; }
body.reference-table .isotope-stage .legend-title button { font: 20px/20px PersianDigits,Arial,sans-serif; padding: 0 5px; }
body.reference-table .decay-key { display: flex; gap: 9px; font-size: 9px; flex-wrap: wrap; line-height: 14px; color: var(--muted); }
body.reference-table .decay-key span:first-child { color: #906624; }
body.reference-table .decay-key span:nth-child(2) { color: #276eb4; }
body.reference-table .decay-key span:nth-child(3) { color: #b23b59; }
body.reference-table .decay-key span:last-child { color: #287851; }
body.reference-table .isotope-deck { display: flex; align-items: flex-start; direction: ltr; width: 100%; height: 128px; overflow-x: auto; overflow-y: hidden; padding: 10px 13px 20px; scrollbar-width: thin; scrollbar-color: #9db3c2 transparent; }
body.reference-table .fan-card { position: relative; flex: 0 0 52px; height: 76px; margin-left: -24px; padding: 3px 4px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border: 1px solid #537083; border-top: 3px solid #a58149; border-radius: 2px; background: var(--cat); color: #172936; box-shadow: -1px 1px 3px #19344a30; transform: translateY(calc(var(--fan-index) * .7px)) rotate(-7deg); transform-origin: bottom left; z-index: var(--fan-index); transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
body.reference-table .fan-card:first-child { margin-left: 0; }
body.reference-table .fan-card > span { font: 11px/13px PersianDigits,Arial,sans-serif; }
body.reference-table .fan-card strong { font: 700 24px/28px PersianDigits,Arial,sans-serif; }
body.reference-table .fan-card small { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-align: left; font: 8px/15px IRANSansX,PersianDigits,Arial,sans-serif; }
body.reference-table .fan-card.stable { border-top-color: #328464; }
body.reference-table .fan-card.active { outline: 2px solid var(--accent); outline-offset: 0; z-index: 100; transform: translateY(calc(var(--fan-index) * .7px - 5px)) rotate(-3deg); }
body.reference-table .fan-card:hover,
body.reference-table .fan-card:focus-visible { transform: translateY(calc(var(--fan-index) * .7px - 8px)) rotate(0deg) scale(1.06); box-shadow: 0 3px 7px #173b4e55; z-index: 101; }
body.reference-table .isotope-prompt { margin: 0; font-size: 13px; line-height: 2; text-align: center; color: var(--muted); }
body.reference-table .isotope-stage > .small-note { font-size: 9px; }
body.reference-table .mix-preview { border: 1px dashed #96afbf; border-radius: 3px; padding: 13px; min-height: 125px; background: #ffffff35; text-align: center; }
body.reference-table .mix-preview .legend-title { justify-content: center; }
body.reference-table .mix-preview .mix-chips { justify-content: center; align-items: center; margin: 8px 0; }
body.reference-table .mix-preview > strong { font-size: 12px; font-weight: 550; margin-left: 12px; }
body.reference-table .mix-preview > button { font-size: 10px; padding: 3px 6px; }
body.reference-table .footer-credit { margin: 12px 0 0; font-size: 10px; }
body.reference-table .footer-credit span { margin-right: 15px; }
body.reference-table.dark .element-heading .symbol.gas { color: #ff7894; }
body.reference-table.dark .element-heading { background: var(--element-dark,var(--element-bg)); color: #f0f5f7; }
body.reference-table.dark .element-heading .category-tag,
body.reference-table.dark .element-heading .en,
body.reference-table.dark .heading-shells { color: #dae7ed; }
body.reference-table.dark .element-heading .symbol.liquid { color: #82b6ff; }
body.reference-table.dark .element-heading .symbol.unknown { color: #b1bac0; }
body.reference-table.dark .fan-card { background: #365665; color: #f1f7fa; border-color: #88a5b8; border-top-color: #c29a61; }
body.reference-table.dark .fan-card.stable { border-top-color: #78c19b; }
body.reference-table.dark .mix-preview { background: #29435230; }
body.reference-table.dark .tabs button:active { background: #31516a; }
@keyframes isotope-card-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width:1050px) and (min-width:761px) {
  body.reference-table .topbar { gap: 12px; padding: 0 12px; }
  body.reference-table .brand { font-size: 18px; }
  body.reference-table .tabs button { padding: 0 8px; font-size: 12px; }
  body.reference-table .header-actions button span { display: none; }
  body.reference-table .top-layout .detail { grid-template-columns: 165px minmax(0,1fr); gap: 13px; }
  body.reference-table .top-layout .element-nav { width: 165px; }
  body.reference-table .top-layout #detail-content { gap: 0 9px; }
  body.reference-table .prop-row { font-size: 10px; }
  body.reference-table .prop-row .value { font-size: 11px; }
  body.reference-table .periodic-grid { min-width: 865px; }
  body.reference-table .legend { padding-inline: 8px; }
  body.reference-table .legend-body { gap: 9px; }
}

@media (max-width:760px) {
  body.reference-table { padding-bottom: 60px; font-size: 13px; }
  body.reference-table .topbar { height: 50px; min-height: 50px; padding: 0 10px; gap: 7px; flex-wrap: nowrap; }
  body.reference-table .brand { font-size: 18px; gap: 6px; }
  body.reference-table .brand-icon { width: 27px; height: 30px; font-size: 22px; }
  body.reference-table .brand small { font-size: 8px; }
  body.reference-table .header-actions { margin-right: auto; order: initial; gap: 1px; }
  body.reference-table .header-actions > button { min-width: 24px; padding: 1px 3px; font-size: 21px; }
  body.reference-table .header-actions button span { display: none; }
  body.reference-table .layout-switch { display: none; }
  body.reference-table .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; height: 55px; margin: 0; padding: 0 4px env(safe-area-inset-bottom); background: var(--surface); box-shadow: 0 -2px 6px #17314c14; border-top: 1px solid var(--line); gap: 0; }
  body.reference-table .tabs button { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; border: 0; border-top: 3px solid transparent; font-size: 11px; padding: 3px 4px 5px; }
  body.reference-table .tabs button span { display: block; margin: 0; font-size: 21px; line-height: 22px; }
  body.reference-table .tabs button.active { border-top-color: var(--accent); border-bottom: 0; background: var(--hover); }
  body.reference-table .tabs > a { display: none; }
  body.reference-table .workspace,
  body.reference-table .workspace.top-layout { display: flex; flex-direction: column; padding: 10px 8px 0; gap: 12px; width: 100%; }
  body.reference-table .workspace .detail,
  body.reference-table .workspace.top-layout .detail { order: 0; display: grid; grid-template-columns: 120px minmax(0,1fr); column-gap: 10px; min-height: 218px; width: 100%; }
  body.reference-table .workspace .element-heading,
  body.reference-table .workspace:not(.top-layout) .element-heading { grid-column: 1; grid-row: 1; align-self: start; min-height: 186px; padding: 4px 4px 31px; }
  body.reference-table .element-heading .atomic { font-size: 20px; top: 6px; left: 6px; right: auto; }
  body.reference-table .element-heading .symbol { margin: 0; padding: 30px 2px 0; font-size: 53px; }
  body.reference-table .element-heading h1 { font-size: 19px; right: 6px; bottom: 42px; margin: 0; }
  body.reference-table .element-heading .en { font-size: 9px; right: 6px; bottom: 29px; }
  body.reference-table .element-heading .mass { position: absolute; font-size: 12px; margin: 0; bottom: 12px; left: 6px; text-align: left; }
  body.reference-table .element-heading .category-tag { position: absolute; font-size: 8px; top: 8px; right: 6px; max-width: 65px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reference-table .workspace .element-nav { position: absolute; width: 120px; height: 27px; bottom: auto; top: 208px; right: 0; grid-column: auto; }
  body.reference-table .element-nav button { font-size: 8px; padding-inline: 1px; }
  body.reference-table .workspace .detail #detail-content { grid-column: 2; grid-row: 1; display: grid; grid-auto-flow: row; grid-template-columns: minmax(0,1fr); grid-template-rows: none; grid-auto-rows: 31px; overflow: visible; max-height: none; padding: 0; gap: 0; }
  body.reference-table #detail-content > .property-line:nth-child(n+7),
  body.reference-table #detail-content > .prop-row:nth-child(n+7) { display: none; }
  body.reference-table .detail.expanded #detail-content > .property-line,
  body.reference-table .detail.expanded #detail-content > .prop-row,
  body.reference-table .detail.show-all #detail-content > .property-line,
  body.reference-table .detail.show-all #detail-content > .prop-row { display: flex; }
  body.reference-table .prop-row { font-size: 10px; height: 31px; min-height: 31px; }
  body.reference-table .prop-row .value { font-size: 11px; }
  body.reference-table .property-variant { max-width: 65px; font-size: 9px; }
  body.reference-table .property-line:has(.property-variant) .prop-row > span:first-child { width: 35px; max-width: 35px; margin-left: 57px; }
  body.reference-table .property-line > .property-variant { right: 38px; width: 55px; max-width: 55px; }
  body.reference-table .more-properties { display: block; grid-column: 2; font-size: 10px; min-height: 26px; padding: 2px 3px; border: 0; background: transparent; color: var(--accent); text-align: center; }
  body.reference-table .table-area { order: 1; width: 100%; padding: 7px 5px 5px; }
  body.reference-table .utilitybar { padding: 8px; gap: 8px; flex-wrap: wrap; font-size: 11px; }
  body.reference-table .utilitybar .search-wrap { min-width: 180px; width: auto; flex: 1; }
  body.reference-table .display-options { flex-wrap: wrap; gap: 6px 12px; width: 100%; font-size: 10px; }
  body.reference-table .control-strip { flex-wrap: wrap; min-height: 52px; gap: 6px; padding-bottom: 8px; }
  body.reference-table .control-strip .property-picker { max-width: 135px; }
  body.reference-table .temperature-slider { order: 3; flex-basis: calc(100% - 45px); min-width: 120px; margin: 5px 0 2px; }
  body.reference-table .temperature-readouts { gap: 9px; font-size: 11px; margin-right: auto; }
  body.reference-table .temperature-readout { order: 0; margin-right: auto; font-size: 11px; }
  body.reference-table .temperature-readout input { width: 43px; font-size: 11px; }
  body.reference-table .temperature-title { padding: 1px 2px; }
  body.reference-table .heading-shells { top: 31px; right: 7px; font-size: 9px; line-height: 10px; }
  body.reference-table .temperature-step { order: 3; }
  body.reference-table .control-strip .text-button { font-size: 9px; }
  body.reference-table .table-scroll { padding: 2px 2px 9px; border: 0; max-width: 100%; overscroll-behavior-x: contain; }
  body.reference-table .periodic-grid,
  body.reference-table .workspace:not(.top-layout) .periodic-grid { min-width: 870px; grid-template-columns: 15px repeat(18,minmax(0,1fr)); grid-template-rows: 17px repeat(7,72px) 19px repeat(2,72px); }
  body.reference-table .element { padding: 2px 3px; }
  body.reference-table .element .sym { font-size: 24px; line-height: 25px; }
  body.reference-table .element .fa { font-size: 12px; line-height: 20px; }
  body.reference-table .element .val { font-size: 9px; line-height: 10px; height: 10px; }
  body.reference-table .legend { padding: 8px 6px 17px; }
  body.reference-table .legend-body,
  body.reference-table .legend:has(> .state-key) { gap: 9px; }
  body.reference-table .state-key { font-size: 9px; gap: 4px; }
  body.reference-table .state-key { width: 72px; }
  body.reference-table .state-key > button { font-size: 9px; gap: 4px; }
  body.reference-table .electron-key { grid-template-columns: minmax(0,1fr) 134px; gap: 7px 9px; }
  body.reference-table .electron-key > .preview-line { font-size: 12px; }
  body.reference-table .orbital-ladder { grid-template-columns: repeat(4,31px); grid-template-rows: repeat(7,17px); }
  body.reference-table .block-key button { padding: 2px 4px; font-size: 9px; }
  body.reference-table .fan-card { flex-basis: 44px; margin-left: -30px; }
  body.reference-table .isotope-deck { height: 123px; }
  body.reference-table .series-map { grid-template-rows: 22px 35px 35px; gap: 2px; }
  body.reference-table .series-map button { font-size: 8px; line-height: 1.65; padding: 1px; }
  body.reference-table .table-caption { margin: 0 0 11px; font-size: 9px; gap: 3px; }
  body.reference-table .table-caption > span:last-child { white-space: normal; }
  body.reference-table .explorer-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.reference-table .property-summary { align-items: flex-start; gap: 7px; }
  body.reference-table .property-summary p { font-size: 11px; }
  body.reference-table .property-summary button { padding: 5px 7px; font-size: 10px; white-space: nowrap; }
  body.reference-table footer { margin: 18px 8px 0; padding: 16px 3px 25px; gap: 12px; }
  body.reference-table .footer-groups { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; }
  body.reference-table .footer-groups h2,
  body.reference-table .footer-groups h3,
  body.reference-table .footer-groups strong { font-size: 12px; }
  body.reference-table .workspace.hide-panel .detail { display: none; }
}

@media (prefers-reduced-motion:reduce) {
  body.reference-table .element,
  body.reference-table .fan-card,
  body.reference-table .orbital-ladder button,
  body.reference-table .tabs button,
  body.reference-table .property-line { animation: none !important; transition: none !important; }
  body.reference-table .element:hover,
  body.reference-table .element:active,
  body.reference-table .orbital-ladder button:hover { transform: none; }
}

@media print {
  body.reference-table { background: white; padding: 0; }
  body.reference-table .workspace { display: block; padding: 0; max-width: none; }
  body.reference-table .periodic-grid,
  body.reference-table .workspace:not(.top-layout) .periodic-grid { min-width: 0; grid-template-columns: 12px repeat(18,minmax(0,1fr)); grid-template-rows: 15px repeat(7,13mm) 3mm repeat(2,13mm); gap: 2px; }
  body.reference-table .element { background: var(--cell); color: #111; padding: 2px; grid-template-rows: 23px minmax(0,1fr) 9px; }
  body.reference-table .element .sym { font-size: 19px; line-height: 20px; }
  body.reference-table .element .fa { font-size: 8px; line-height: 9px; min-height: 0; }
  body.reference-table .element .val,
  body.reference-table .element .z { font-size: 8px; }
  body.reference-table .legend { padding: 5px 10px; }
  body.reference-table .series-map { grid-template-rows: 18px 25px 25px; }
  body.reference-table .series-map button { font-size: 7px; }
  body.reference-table .state-key { font-size: 8px; }
  body.reference-table .more-properties { display: none !important; }
}

/* State changes share the same colour domain in both themes. */
body.reference-table .element{color:var(--ink,#151515)}
body.reference-table .element[aria-pressed=true]{color:var(--ink,#151515)}
body.reference-table.dark .element,body.reference-table.dark .element[aria-pressed=true]{color:var(--ink-dark,#fff)}
body.reference-table .element.hover-dim{opacity:.18}
body.reference-table .orbital-ladder button.active{outline:2px solid var(--accent);z-index:2}
/* Readable screen typography; retain bold symbols and phase buttons. */
@media screen {
  body.reference-table { font-size: 15px; font-weight: 400; }
  body.reference-table .brand small,
  body.reference-table .header-actions button span,
  body.reference-table .element-heading .category-tag,
  body.reference-table .element-heading .en,
  body.reference-table .element-nav button,
  body.reference-table .legend-title button,
  body.reference-table .legend-reset,
  body.reference-table .small-note,
  body.reference-table .color-controls,
  body.reference-table .table-caption,
  body.reference-table .footer-credit,
  body.reference-table .more-properties,
  body.reference-table .decay-key { font-size: 12px; line-height: 1.6; }
  body.reference-table .utilitybar,
  body.reference-table .display-options,
  body.reference-table .control-strip,
  body.reference-table .control-strip input,
  body.reference-table .control-strip select,
  body.reference-table .control-strip .text-button,
  body.reference-table .temperature-title,
  body.reference-table .temperature-readout,
  body.reference-table .temperature-readout input,
  body.reference-table .legend-title,
  body.reference-table .series-head,
  body.reference-table .panel p,
  body.reference-table footer,
  body.reference-table footer button { font-size: 13px; }
  body.reference-table .prop-row,
  body.reference-table .workspace:not(.top-layout) .prop-row { font-size: 13px; min-height: 36px; height: auto; }
  body.reference-table .prop-row .value { font-size: 13px; font-weight: 400; }
  body.reference-table .prop-row small { font-size: 11px; font-weight: 400; }
  body.reference-table .property-variant,
  body.reference-table .workspace:not(.top-layout) .property-variant { font-size: 12px; }
  body.reference-table .top-layout #detail-content { grid-template-rows: repeat(6,minmax(38px,auto)); }
  body.reference-table .periodic-grid,
  body.reference-table .workspace:not(.top-layout) .periodic-grid { min-width: 900px; grid-template-rows: 20px repeat(7,80px) 24px repeat(2,80px); }
  body.reference-table .element { grid-template-rows: 35px minmax(22px,1fr) 16px; }
  body.reference-table .element .z { font-size: 12px; height: 14px; line-height: 14px; font-weight: 400; }
  body.reference-table .element .sym { padding-top: 7px; transform: translateX(7.5px); }
  body.reference-table .element .fa { font-size: 14px; font-weight: 400; line-height: 19px; }
  body.reference-table .element .val { font-size: 13px; font-weight: 400; height: 16px; line-height: 16px; }
  body.reference-table .group-label,
  body.reference-table .period-label { font-size: 13px; font-weight: 400; }
  body.reference-table .table-key { font-size: 11px; line-height: 18px; }
  body.reference-table .mass-note { font-size: 11px; line-height: 18px; }
  body.reference-table .series-map { grid-template-rows: 27px 43px 43px; }
  body.reference-table .series-map button { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
  body.reference-table .state-key { width: 84px; gap: 5px; }
  body.reference-table .state-key > button { height: 32px; font-size: 12px; }
  body.reference-table .heading-shells { font-size: 12px; line-height: 15px; font-weight: 400; }
  body.reference-table .element-heading .mass { font-weight: 400; }
  body.reference-table .element-heading .mass small { font-size: 12px; }
  body.reference-table .block-key button,
  body.reference-table .scale-choice button,
  body.reference-table .mix-preview > button { font-size: 12px; }
  body.reference-table .orbital-ladder button { font-size: 12px; }
  body.reference-table .orbital-ladder sup { font-size: 10px; }
  body.reference-table .fan-card > span { font-size: 12px; }
  body.reference-table .fan-card small { font-size: 11px; }
}
@media screen and (max-width:760px) {
  body.reference-table .tabs button { font-size: 13px; }
  body.reference-table .workspace .detail { grid-template-columns: 120px minmax(0,1fr); }
  body.reference-table .prop-row > span:first-child { white-space: normal; }
  body.reference-table .prop-row .value { flex-wrap: wrap; row-gap: 0; }
  body.reference-table .property-line:has(.property-variant) { flex-wrap: wrap; padding-top: 24px; }
  body.reference-table .property-line:has(.property-variant) .prop-row > span:first-child { width: auto; max-width: none; margin-left: 0; }
  body.reference-table .property-line > .property-variant { top: 0; right: 0; width: auto; max-width: 100%; }
  body.reference-table .temperature-readout input { width: 52px; }
}
@media(max-width:760px){body.reference-table .workspace .detail{min-height:237px}body.reference-table .control-strip .temperature-slider{order:2;flex:1 1 calc(100% - 66px);min-width:0}body.reference-table #temperature-minus{order:1}body.reference-table #temperature-plus{order:3}body.reference-table .temperature-readout,body.reference-table .temperature-title{order:0}body.reference-table .temperature-title{width:100%;text-align:right}}
body.reference-table .detail-orbital{min-width:0;margin-top:14px}
body.reference-table .detail-orbital .orbital-canvas{height:230px;border-radius:0}
body.reference-table .detail-orbital #orbital-label{font-size:11px;line-height:1.8}
body.reference-table[data-tab=electrons] .top-layout #detail-content{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,42px);position:relative;padding-left:220px;min-height:230px}
body.reference-table[data-tab=electrons] .top-layout .detail-orbital{position:absolute;left:0;top:0;width:200px;margin:0}
@media(max-width:760px){body.reference-table .temperature-readouts{order:0;flex:1;justify-content:space-evenly;margin:0;gap:2px}body.reference-table .temperature-title{width:auto}body.reference-table .temperature-step{flex:0 0 20px}body.reference-table .detail-orbital{display:none}body.reference-table .detail.expanded .detail-orbital{display:block;grid-column:1/-1;min-height:265px}body.reference-table .detail.expanded #detail-content{grid-auto-rows:auto}}

body.reference-table .temperature-track{display:flex;align-items:center;gap:7px;direction:ltr;flex:1;min-width:120px}
body.reference-table .temperature-track #temperature-minus,body.reference-table .temperature-track #temperature-plus{order:0;flex:0 0 20px}
body.reference-table .control-strip .temperature-track .temperature-slider{order:0;flex:1;width:auto;min-width:0;margin:0}
@media(max-width:760px){body.reference-table .temperature-track{order:2;flex-basis:100%;margin-top:5px}}

body.reference-table .header-actions > #theme { font: 400 13px IRANSansX,Tahoma,sans-serif; min-width: 46px; }

/* Preserve the name visibility preference over the reference layout. */
body.reference-table.no-names .element .fa,
body.reference-table.no-symbols .element .sym,
body.reference-table.no-values .element .val { display: block; visibility: hidden; }
body.reference-table.no-names .element:hover .fa,
body.reference-table.no-symbols .element:hover .sym,
body.reference-table.no-values .element:hover .val,
body.reference-table.no-names .element:focus-visible .fa,
body.reference-table.no-symbols .element:focus-visible .sym,
body.reference-table.no-values .element:focus-visible .val { visibility: visible; }

/* Mobile keeps each element readable while the table scrolls horizontally. */
@media screen and (max-width:1150px) {
  body.reference-table .periodic-grid,
  body.reference-table .workspace:not(.top-layout) .periodic-grid {
    width: max-content;
    min-width: 0;
    grid-template-columns: 15px repeat(18,78px);
    grid-template-rows: 20px repeat(7,88px) 24px repeat(2,88px);
  }
  body.reference-table .element { grid-template-rows: 32px minmax(32px,1fr) 16px; }
  body.reference-table .element .sym { padding-top: 6px; }
  body.reference-table .element .fa {
    height: auto;
    min-height: 0;
    line-height: 16px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}
@media screen and (min-width:1151px) and (max-width:1599px) {
  body.reference-table .element .sym { font-size: 20px; line-height: 22px; transform: translate(1px,5px); }
}

@media screen and (max-width:760px) {
  body.reference-table .periodic-grid,
  body.reference-table .workspace:not(.top-layout) .periodic-grid {
    grid-template-columns: 15px repeat(18,64px);
    grid-template-rows: 18px repeat(7,72px) 18px repeat(2,72px);
  }
  body.reference-table .element { grid-template-rows: 26px minmax(28px,1fr) 14px; padding: 1px 2px; }
  body.reference-table .element .z { top: 1px; left: 2px; font-size: 12px; line-height: 13px; height: 13px; }
  body.reference-table .element .sym { font-size: 24px; line-height: 26px; padding-top: 1px; transform: translateX(4px); }
  body.reference-table .element .fa { font-size: 13px; line-height: 13px; }
  body.reference-table .element .val { font-size: 12px; line-height: 14px; height: 14px; }
}

@media screen {
  body.reference-table .element { grid-template-columns: minmax(0,1fr); }
  body.reference-table .element .fa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    line-height: 19px;
    min-height: 0;
  }
  body.reference-table .element .fa-label {
    display: inline-block;
    flex: none;
    white-space: nowrap;
    transform: scaleX(var(--name-scale,1));
    transform-origin: center;
  }
}
@media screen and (min-width:1600px) {
  body.reference-table .element .sym { padding-top: 5px; }
}
@media screen and (max-width:760px) {
  body.reference-table .element .fa { line-height: 13px; }
}