/* Structure editor: Spins (magnetic moments) tab.
   Load order is significant: styles/*.css are linked in numeric order from index.html. */

.structure-moment-row>input[type=checkbox]{
  justify-self:center;
}
@media (max-width:1450px){
  .structure-moment-row{
    grid-template-columns:calc(28px * var(--tas-density)) calc(52px * var(--tas-density)) minmax(calc(138px * var(--tas-density)),1fr) calc(58px * var(--tas-density)) minmax(calc(78px * var(--tas-density)),calc(110px * var(--tas-density)));
  }
  
}
.structure-moment-row{
  grid-template-columns:calc(28px * var(--tas-density)) calc(52px * var(--tas-density)) calc(138px * var(--tas-density)) calc(58px * var(--tas-density)) calc(58px * var(--tas-density)) minmax(calc(78px * var(--tas-density)),1fr);
}
@media (max-width:1450px){
  .structure-moment-row{grid-template-columns:auto minmax(calc(110px * var(--tas-density)),1fr);}
}
.structure-moment-row{
  grid-template-columns:calc(28px * var(--tas-density)) calc(48px * var(--tas-density)) calc(150px * var(--tas-density)) calc(66px * var(--tas-density)) calc(58px * var(--tas-density)) calc(66px * var(--tas-density)) minmax(calc(165px * var(--tas-density)),1fr);
  gap:calc(6px * var(--tas-density));
}
@media (max-width:1450px){
  
  
  .structure-moment-row{
    grid-template-columns:calc(28px * var(--tas-density)) calc(48px * var(--tas-density)) repeat(4,minmax(calc(58px * var(--tas-density)),1fr));
  }
  
  .structure-bond-row{
    grid-template-columns:minmax(calc(58px * var(--tas-density)),1fr) minmax(calc(58px * var(--tas-density)),1fr) calc(66px * var(--tas-density)) calc(66px * var(--tas-density)) calc(54px * var(--tas-density)) calc(40px * var(--tas-density)) auto;
  }
}

/* Compact Structure controls */
.structure-moment-row{
  grid-template-columns:calc(44px * var(--tas-density)) minmax(calc(58px * var(--tas-density)),calc(72px * var(--tas-density))) minmax(calc(150px * var(--tas-density)),1fr) minmax(calc(150px * var(--tas-density)),calc(190px * var(--tas-density))) minmax(calc(170px * var(--tas-density)),1fr) !important;
}
.structure-moment-row{
  grid-template-columns:calc(44px * var(--tas-density)) minmax(calc(58px * var(--tas-density)),calc(72px * var(--tas-density))) minmax(calc(150px * var(--tas-density)),1fr) calc(90px * var(--tas-density)) calc(42px * var(--tas-density)) !important;
}
.structure-moment-color-swatch{
  width:calc(40px * var(--tas-density))!important;
  min-width:calc(40px * var(--tas-density))!important;
  height:calc(30px * var(--tas-density))!important;
  padding:calc(2px * var(--tas-density))!important;
}

/* Structure viewer v9 refinements */
.structure-moment-row{
  border:calc(1px * var(--tas-density)) solid #333!important;
  border-left:calc(1px * var(--tas-density)) solid #333!important;
}
.structure-moment-site{
  color:#111!important;
}
.structure-moment-row{
  border:0!important;
  border-left:0!important;
  border-radius:0!important;
  padding:calc(4px * var(--tas-density)) calc(2px * var(--tas-density))!important;
  background:#fff!important;
}
.structure-moment-site{
  color:#111!important;
}

/* Structure viewer v9 cleanup */
.structure-moment-row{
  border:none!important;
  border-left:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  background:#fff!important;
  padding:calc(4px * var(--tas-density)) calc(2px * var(--tas-density))!important;
}
.structure-moment-site{
  color:#111!important;
}
#structurePanel .structure-moment-axis-row select{
  width:100%;
  min-width:0;
}

/* Magnetic ion site labels: match Atoms label sizing, but use normal weight. */
#structurePanel .structure-moment-site{
  font-size:inherit!important;
  font-weight:400!important;
}

/* Structure viewer compact-control refinement. */
#structurePanel #cifMagMomentRows{
  max-height:calc(330px * var(--tas-density));
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:calc(4px * var(--tas-density));
  scrollbar-gutter:stable;
}
#structurePanel .structure-spin-mode-row select{width:100%;min-width:0;}
#structurePanel .structure-spin-display-row select,
#structurePanel .structure-spin-display-row input{width:100%;min-width:0;}
#structurePanel .structure-moment-color-swatch{align-self:end;}
#structurePanel .structure-moment-row input[type=number]{width:100%;min-width:0;}

/* Individual expanded-atom spin editing: keep long lists usable on mobile. */
.structure-individual-selector{max-width:calc(340px * var(--tas-density));width:100%;min-width:0;margin:calc(8px * var(--tas-density)) 0 calc(4px * var(--tas-density))}
#cifSpinIndividualInfo{font-size:.85em;line-height:1.4;margin:calc(4px * var(--tas-density)) 0 calc(8px * var(--tas-density));overflow-wrap:anywhere}
#structurePanel .structure-spin-editor-toolbar select{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#cifSpinIndividualInfo[hidden]{display:none!important;}
#structurePanel .structure-spin-editor-toolbar > .structure-entry-field {
  min-width: 0;
  width: 100%;
  max-width: none;
}

/* Preserve checkbox, site label, direction fields and color in ONE row.
   These rules intentionally override the older narrow-view 2-row breakpoint. */
#structurePanel #cifMagMomentRows .structure-moment-row {
  display: grid !important;
  grid-template-columns: calc(20px * var(--tas-density)) minmax(calc(33px * var(--tas-density)), .65fr) minmax(0, 4fr) calc(30px * var(--tas-density)) !important;
  grid-template-rows: auto !important;
  column-gap: calc(4px * var(--tas-density)) !important;
  row-gap: 0 !important;
  min-width: 0 !important;
  align-items: end !important;
}
#structurePanel #cifMagMomentRows .structure-moment-row > input[type=checkbox] {
  grid-column: 1 !important; grid-row: 1 !important;
  margin: 0; align-self: center;
}
#structurePanel #cifMagMomentRows .structure-moment-row > .structure-moment-site {
  grid-column: 2 !important; grid-row: 1 !important;
  min-width: 0 !important; overflow: hidden; text-overflow: ellipsis;
}

#structurePanel #cifMagMomentRows .structure-moment-row > .structure-moment-color-swatch {
  grid-column: 4 !important; grid-row: 1 !important;
  width: calc(30px * var(--tas-density)) !important; min-width: 0 !important;
  justify-self: end !important; align-self: end !important;
}
#structurePanel #cifMagMomentRows .structure-moment-row .structure-entry-field,
#structurePanel #cifMagMomentRows .structure-moment-row input[type=number] {
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  box-sizing: border-box !important;
}
#structurePanel #cifMagMomentRows .structure-moment-row input[type=number] {
  padding-left: calc(2px * var(--tas-density)) !important; padding-right: calc(2px * var(--tas-density)) !important;
}
#structurePanel #cifMagMomentRows .structure-moment-row .structure-entry-label {
  font-size: calc(10px * var(--tas-density)); white-space: nowrap;
}
#structurePanel :is(.structure-moment-axis-row,.structure-spin-mode-row,.structure-spin-editor-toolbar) select,
#structurePanel :is(.structure-entry-field,.structure-plot-toolbar) :is(input,select){
  font-size:var(--tas-control-text-size)!important;
}
#structurePanel #cifSpinTable {
  display:grid;
  grid-template-columns:calc(38px * var(--tas-density)) calc(53px * var(--tas-density)) minmax(calc(67px * var(--tas-density)),.8fr) repeat(3,minmax(calc(72px * var(--tas-density)),1fr)) calc(53px * var(--tas-density));
  min-width:calc(475px * var(--tas-density));
  width:100%;box-sizing:border-box;
  gap:calc(1px * var(--tas-density));
  background:#c9cdd1;
  align-items:stretch;
}
#structurePanel #cifSpinTable .structure-spin-table-header {
  box-sizing:border-box;min-width:0;
  padding:calc(7px * var(--tas-density)) calc(2px * var(--tas-density));
  background:#f7f7f7;
  color:#41464c;
  font-size:calc(11px * var(--tas-density));font-weight:650;
  text-align:center;white-space:nowrap;
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
}
#structurePanel #cifSpinTable .structure-spin-bulk-header label {
  display:flex;align-items:center;justify-content:center;gap:calc(3px * var(--tas-density));
  margin:0;cursor:pointer;font-size:inherit;font-weight:inherit;
}
#structurePanel #cifSpinTable .structure-spin-bulk-header input[type=checkbox] {
  width:calc(14px * var(--tas-density));height:calc(14px * var(--tas-density));
  min-width:0;margin:0;cursor:pointer;
}
#structurePanel #cifMagMomentRows,
#structurePanel #cifMagMomentRows .structure-moment-row {
  display:contents!important;
}
#structurePanel #cifSpinTable .structure-spin-cell {
  min-width:0;box-sizing:border-box;
  min-height:calc(34px * var(--tas-density));
  padding:calc(3px * var(--tas-density));
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
#structurePanel #cifSpinTable .structure-spin-index {
  background:#fafafa;font-weight:650;font-size:calc(11px * var(--tas-density));color:#555;
}
#structurePanel #cifSpinTable .structure-spin-atom {justify-content:flex-start;}
#structurePanel #cifSpinTable .structure-moment-site {
  display:block;max-width:none!important;width:100%;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;
  font-size:calc(12px * var(--tas-density));
}
#structurePanel #cifSpinTable .structure-spin-use input[type=checkbox] {
  width:calc(15px * var(--tas-density));height:calc(15px * var(--tas-density));
  min-width:0;margin:0;cursor:pointer;
}
#structurePanel #cifSpinTable .structure-spin-value input[type=number] {
  box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:none!important;
  padding:calc(4px * var(--tas-density)) calc(3px * var(--tas-density))!important;
  font-size:calc(12px * var(--tas-density));text-align:right;
}
#structurePanel #cifSpinTable .structure-spin-color input[type=color] {
  width:calc(32px * var(--tas-density))!important;
  min-width:0!important;max-width:100%;height:calc(26px * var(--tas-density))!important;
  padding:calc(2px * var(--tas-density));margin:0;cursor:pointer;
  align-self:center!important;justify-self:center!important;
}
#structurePanel #cifSpinTable .structure-spin-table-empty {
  grid-column:1/-1;background:#fff;padding:calc(10px * var(--tas-density));
  font-size:calc(12px * var(--tas-density));color:#555;
}
/* Match the Atomic positions header exactly, rather than enlarging Atoms captions. */
#structurePanel #cifSpinTable .structure-spin-table-header,
#structurePanel .structure-style-table .structure-style-header {
  box-sizing:border-box;
  font-size:calc(12px * var(--tas-density)) !important;
  font-weight:650 !important;
  color:#41464c;
  line-height:1.35;
  padding:calc(7px * var(--tas-density)) calc(4px * var(--tas-density));
  min-height:calc(33px * var(--tas-density));
  background:#f7f7f7;
}
#structurePanel #cifSpinTable .structure-spin-cell,
#structurePanel .structure-style-table .structure-style-cell {
  box-sizing:border-box;
  min-height:calc(37px * var(--tas-density));
  font-size:calc(12px * var(--tas-density));
}
/* Native input and header dimensions match the Positions cells. */
#structurePanel #cifSpinTable .structure-spin-value input[type=number],
#structurePanel .structure-style-cell :is(input[type=number],select) {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  font-size:calc(13px * var(--tas-density)) !important;
  padding:calc(4px * var(--tas-density)) calc(4px * var(--tas-density));
}
#structurePanel .structure-style-table .structure-rows-empty {
  grid-column:1/-1;background:#fff;padding:calc(12px * var(--tas-density));
}

/* 2026-10-13: final editor legibility and selection adjustments.
   Atoms retains its ORIGINAL labels, expanded-site rows, input sizes and
   two-row color palette. Only the table's height/scroll behavior changes. */
/* Match Positions text and input dimensions in both Spins and Style. */
#structurePanel #cifSpinTable .structure-spin-table-header,
#structurePanel .structure-style-table .structure-style-header{
  font-size:max(15px,calc(17px * var(--tas-density)))!important;
  min-height:max(35px,calc(36px * var(--tas-density)));
  line-height:1.35;
}
#structurePanel #cifSpinTable .structure-spin-cell,
#structurePanel .structure-style-table .structure-style-cell{
  font-size:max(15px,calc(17px * var(--tas-density)))!important;
  min-height:max(42px,calc(42px * var(--tas-density)));
}
#structurePanel #cifSpinTable .structure-spin-index,
#structurePanel #cifSpinTable .structure-moment-site,
#structurePanel .structure-style-table .structure-style-index{
  font-size:max(15px,calc(17px * var(--tas-density)))!important;
}
#structurePanel #cifSpinTable .structure-spin-value input[type=number],
#structurePanel .structure-style-table .structure-style-cell :is(select,input[type=number]){
  font-size:max(15px,calc(17px * var(--tas-density)))!important;
  min-height:max(32px,calc(33px * var(--tas-density)));
  padding:calc(5px * var(--tas-density)) calc(5px * var(--tas-density))!important;
}
#structurePanel #cifSpinTable .structure-spin-bulk-header input[type=checkbox],
#structurePanel #cifSpinTable .structure-spin-use input[type=checkbox]{
  width:calc(17px * var(--tas-density));
  height:calc(17px * var(--tas-density));
}
#structurePanel #cifSpinTable .structure-spin-cell{cursor:pointer;}
#structurePanel #cifSpinTable .structure-moment-row.spin-row-selected > .structure-spin-cell{
  background:#e8f2fc;
}
#structurePanel #cifSpinTable .structure-moment-row.spin-row-selected > .structure-spin-index{
  color:#17578a;
}
#structurePanel #cifSpinTable .structure-moment-row.spin-row-selected > .structure-spin-value input{
  background:#fff;
}
/* Keep enlarged fields usable: let the table scroll horizontally instead of
   shrinking numeric input text or the native select arrow below usability. */
#structurePanel #cifSpinTable{
  grid-template-columns:45px 65px minmax(95px,.9fr) repeat(3,minmax(94px,1fr)) 60px;
  min-width:630px;
}
/* Reopening Uij shares the height budget with Positions. When collapsed the
   JS removes the temporary override and restores the usual Positions cap. */

/* Spins and Style: 75% of the preceding large-font/large-field treatment.
   All select/input/pointer interactions are unchanged. */
#structurePanel #cifSpinTable .structure-spin-table-header,
#structurePanel .structure-style-table .structure-style-header{
  font-size:max(11.25px,calc(12.75px * var(--tas-density)))!important;
  min-height:max(26.25px,calc(27px * var(--tas-density)));
  padding:calc(5px * var(--tas-density)) calc(3px * var(--tas-density));
}
#structurePanel #cifSpinTable .structure-spin-cell,
#structurePanel .structure-style-table .structure-style-cell{
  font-size:max(11.25px,calc(12.75px * var(--tas-density)))!important;
  min-height:max(31.5px,calc(31.5px * var(--tas-density)));
  padding:calc(3px * var(--tas-density));
}
#structurePanel #cifSpinTable .structure-spin-index,
#structurePanel #cifSpinTable .structure-moment-site,
#structurePanel .structure-style-table .structure-style-index{
  font-size:max(11.25px,calc(12.75px * var(--tas-density)))!important;
}
#structurePanel #cifSpinTable .structure-spin-value input[type=number],
#structurePanel .structure-style-table .structure-style-cell :is(select,input[type=number]){
  font-size:max(11.25px,calc(12.75px * var(--tas-density)))!important;
  min-height:max(24px,calc(24.75px * var(--tas-density)));
  padding:calc(3.75px * var(--tas-density))!important;
}
#structurePanel #cifSpinTable{
  grid-template-columns:
    calc(34px * var(--tas-density))
    calc(49px * var(--tas-density))
    minmax(calc(72px * var(--tas-density)),.9fr)
    repeat(3,minmax(calc(71px * var(--tas-density)),1fr))
    calc(45px * var(--tas-density));
  min-width:calc(475px * var(--tas-density));
}

/* The three Structure k1 entries share the previous Propagation vector slot. */
#structurePanel .structure-k1-field{min-width:0;display:flex;flex-direction:column;gap:3px;}
#structurePanel .structure-k1-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-width:0;width:100%;}
#structurePanel .structure-k1-fields .structure-entry-field{min-width:0;gap:2px;}
#structurePanel .structure-k1-fields input{box-sizing:border-box;min-width:0;width:100%;}
#structurePanel .structure-propagation-legacy-select{display:none!important;}
#structurePanel .structure-plot-toolbar .structure-cell-reference-row {
  grid-column:1 / -1;
  width:auto!important;
  min-width:0;
  flex:none!important;
}