/* Tab control — SysTabControl32 (INVENTORY C1; SPEC.md §4.18), measured on the Display, Mouse, Keyboard and Regional
   property sheets. Built by js/components/tabs.js:
     <div class="w2k-tabcontrol"> <div class="w2k-tabs" role="tablist"> <button role="tab">…</button> … </div>
       <div class="w2k-tabpanel" role="tabpanel">…</div> … </div>
   Unselected tabs are 18px high with 1px chamfered top corners; the selected tab grows 2px up and sideways and covers
   the panel's top line; text 6px in (+2 when selected), line 3px below the tab top. */
.w2k-tabcontrol { position: relative; display: flex; flex-direction: column; }
.w2k-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  height: calc(var(--metric-tab-height) + var(--metric-tab-selected-grow));
  padding: 0 var(--metric-tab-selected-grow);
}
.w2k-tab {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--tab-width, auto);           /* an explicit width (TODO A6) is the unselected width */
  min-width: var(--metric-tab-min-width);
  height: var(--metric-tab-height);
  margin: var(--metric-tab-selected-grow) 0 0;
  /* The content box is exactly one line: a <button> would center a taller one on a half pixel. */
  padding: var(--metric-tab-text-top) var(--metric-tab-padding) calc(var(--metric-tab-height) - var(--metric-tab-text-top) - var(--line-height-ui));
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  color: var(--sys-btn-text);
  font: inherit;
  line-height: var(--line-height-ui);
  text-align: left;
  white-space: pre;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Sides from the third row down: left ButtonHilight, right ButtonShadow inside ButtonDkShadow. */
.w2k-tab::before {
  content: "";
  position: absolute;
  inset: 2px 0 0;
  box-shadow: inset 1px 0 var(--sys-btn-hilight), inset -1px 0 var(--sys-btn-dk-shadow), inset -2px 0 var(--sys-btn-shadow);
  pointer-events: none;
}
/* Top line (2px in from both ends) and the chamfer pixels: ButtonHilight left, ButtonDkShadow right. */
.w2k-tab::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background:
    linear-gradient(var(--sys-btn-hilight), var(--sys-btn-hilight)) 2px 0 / calc(100% - 4px) 1px no-repeat,
    linear-gradient(var(--sys-btn-hilight), var(--sys-btn-hilight)) 1px 1px / 1px 1px no-repeat,
    linear-gradient(var(--sys-btn-dk-shadow), var(--sys-btn-dk-shadow)) calc(100% - 1px) 1px / 1px 1px no-repeat;
  pointer-events: none;
}
.w2k-tab[aria-selected="true"], .w2k-tab.is-active {
  z-index: 2;
  width: calc(var(--tab-width) + 2 * var(--metric-tab-selected-grow));
  min-width: calc(var(--metric-tab-min-width) + 2 * var(--metric-tab-selected-grow));
  height: calc(var(--metric-tab-height) + var(--metric-tab-selected-grow) + 1px);   /* covers the panel's top line */
  margin: 0 calc(-1 * var(--metric-tab-selected-grow));
  padding-left: calc(var(--metric-tab-padding) + var(--metric-tab-selected-grow));
  padding-right: calc(var(--metric-tab-padding) + var(--metric-tab-selected-grow));
  padding-bottom: calc(var(--metric-tab-height) + var(--metric-tab-selected-grow) + 1px - var(--metric-tab-text-top) - var(--line-height-ui));
}
/* Focus rectangle around the text (knowledge: 1px outside the line box). */
.w2k-tab > .w2k-focus-rect { display: none; }
.w2k-tab.is-focus > .w2k-focus-rect,
html:not([data-cues="hidden"]) .w2k-tab:focus > .w2k-focus-rect { display: block; inset: calc(var(--metric-tab-text-top) - 1px) calc(var(--metric-tab-padding) - 3px) auto; height: calc(var(--line-height-ui) + 2px); }
.w2k-tab[aria-selected="true"] > .w2k-focus-rect { left: calc(var(--metric-tab-padding) + var(--metric-tab-selected-grow) - 3px) !important; right: calc(var(--metric-tab-padding) + var(--metric-tab-selected-grow) - 3px) !important; }
.w2k-tab:disabled { color: var(--sys-gray-text); text-shadow: 1px 1px 0 var(--color-disabled-emboss); }

.w2k-tabpanel {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--color-surface);
  box-shadow: var(--edge-button);
}
.w2k-tabpanel[hidden] { display: none; }

/* Property sheet client: tab control and the OK / Cancel / Apply row (SPEC.md §4.18). */
.w2k-sheet {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(var(--metric-sheet-top) - var(--metric-tab-selected-grow) + var(--metric-tab-selected-grow)) var(--metric-sheet-margin) var(--metric-sheet-bottom);
  font: var(--font-dialog);
}
/* Pages built on DS_SHELLFONT templates (MS Shell Dlg 2): Tahoma for the whole sheet (Date/Time Properties). */
.w2k-sheet[data-font="shell2"] { font: var(--font-ui); }
.w2k-sheet__tabs { flex: 1; min-height: 0; }
.w2k-sheet__buttons {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: var(--metric-button-gap);
  margin-top: var(--metric-sheet-button-gap);
}