/* Four physical arrangements; one compact, keyboard-accessible year selector. */
.qfc-control {
  --qfc-dark: #1b3039;
  --qfc-top: #253c46;
  --qfc-bottom: #1b3039;
  --qfc-light: #fff;
  --qfc-edge: #4b6169;
  --qfc-height: 62px;
  --qfc-type: 44px;
  container: qfc / inline-size;
  width: 100%;
  color: var(--ink, #172a30);
  font-family: Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
}
.qfc-control *, .qfc-control *::before, .qfc-control *::after { box-sizing: border-box; }
.qfc-control [hidden] { display: none !important; }
.qfc-layout { width: min(100%, 340px); margin-inline: auto; }
.qfc-control button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qfc-control button:focus-visible { outline: 3px solid var(--teal, #15756f); outline-offset: 3px; position: relative; z-index: 10; }
.qfc-control button[aria-disabled="true"] { opacity: .34; cursor: default; }
.qfc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.qfc-mechanism { display: flex; align-items: center; justify-content: center; }
.qfc-step { flex: 0 0 44px; width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink, #172a30); background: var(--paper, #fff); }
.qfc-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qfc-step:not([aria-disabled="true"]):hover { color: var(--teal, #15756f); border-color: var(--teal, #15756f); }
.qfc-step:not([aria-disabled="true"]):active svg { transform: scale(.9); }
.qfc-readout { position: relative; flex-shrink: 0; }
.qfc-digits { display: flex; gap: 5px; }
.qfc-face { position: relative; display: block; width: 100%; height: var(--qfc-height); perspective: 350px; border-radius: 3px; font: 700 var(--qfc-type)/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: -.035em; }
.qfc-half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; color: var(--qfc-light); backface-visibility: hidden; }
.qfc-upper { top: 0; background: var(--qfc-top); border-radius: 3px 3px 0 0; }
.qfc-lower { bottom: 0; background: var(--qfc-bottom); border-radius: 0 0 3px 3px; }
.qfc-glyph { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 100%; height: var(--qfc-height); }
.qfc-lower .qfc-glyph { transform: translateY(-50%); }
.qfc-hinge { position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: #0b1920; opacity: .85; z-index: 5; pointer-events: none; }
.qfc-moving { z-index: 3; }
.qfc-moving-top { transform-origin: center bottom; }
.qfc-moving-bottom { transform-origin: center top; z-index: 4; }
.qfc-all-plaque { width: 100%; height: var(--qfc-height); display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--qfc-light); background: var(--qfc-dark); border-radius: 3px; font-family: "Trebuchet MS", Arial, sans-serif; }
.qfc-all-word { font-size: 27px; font-weight: 700; letter-spacing: .02em; }
.qfc-all-subtitle { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.qfc-years { display: grid; grid-template-columns: repeat(var(--qfc-count), minmax(44px, 1fr)); width: 100%; margin-top: 8px; }
.qfc-year { position: relative; min-width: 44px; min-height: 44px; padding: 7px 2px 8px; border: 0; background: none; font-size: 12px !important; color: var(--muted, #52666b) !important; }
.qfc-year::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 20px; height: 2px; transform: translateX(-50%); background: transparent; }
.qfc-year[aria-pressed="true"] { color: var(--ink, #172a30) !important; font-weight: 700; }
.qfc-year[aria-pressed="true"]::after { background: var(--teal, #15756f); }
.qfc-year:hover { color: var(--teal, #15756f) !important; }

/* Desk: four independent flaps with external circular step keys. */
.qfc-desk .qfc-mechanism { gap: 15px; padding-top: 4px; }
.qfc-desk .qfc-readout { width: 179px; }
.qfc-desk .qfc-digits .qfc-face { width: 41px; }
.qfc-desk .qfc-step { border-radius: 50%; }
.qfc-desk .qfc-face::before, .qfc-desk .qfc-face::after { content: ""; position: absolute; top: calc(50% - 3px); width: 2px; height: 6px; background: #a1b1b7; z-index: 6; }
.qfc-desk .qfc-face::before { left: 0; }
.qfc-desk .qfc-face::after { right: 0; }

/* Station: one joined chassis. The two controls belong to the same instrument. */
.qfc-station { --qfc-height: 58px; --qfc-type: 44px; }
.qfc-station .qfc-mechanism { height: 82px; width: 100%; border: 1px solid var(--qfc-edge); border-radius: 5px; background: var(--qfc-dark); padding: 10px; gap: 9px; }
.qfc-station .qfc-readout { flex: 1; min-width: 0; }
.qfc-station .qfc-sheet { display: block; width: 100%; }
.qfc-station .qfc-face { letter-spacing: .07em; font-size: 43px; }
.qfc-station .qfc-step { height: 58px; background: transparent; color: #fff; border-color: var(--qfc-edge); border-radius: 2px; }
.qfc-station .qfc-step:not([aria-disabled="true"]):hover { color: #b8e5d9; border-color: #b8e5d9; }
.qfc-station .qfc-all-plaque { background: var(--qfc-top); }
.qfc-station .qfc-year::after { width: 6px; height: 6px; border-radius: 50%; bottom: 0; }

/* Calendar: a broad paper leaf and a vertical rocker, with a real bound top edge. */
.qfc-calendar { --qfc-height: 68px; --qfc-type: 43px; --qfc-top: var(--paper, #fff); --qfc-bottom: var(--paper, #fff); --qfc-light: var(--ink, #172a30); }
.qfc-calendar .qfc-mechanism { align-items: stretch; gap: 14px; padding-top: 7px; }
.qfc-calendar-page { width: 175px; height: 90px; position: relative; border: 1px solid var(--ink, #172a30); border-radius: 2px; padding: 14px 10px 4px; }
.qfc-calendar-rings { position: absolute; top: -8px; left: 31px; right: 31px; display: flex; justify-content: space-between; }
.qfc-calendar-rings i { display: block; height: 14px; width: 6px; border: 1px solid var(--ink, #172a30); border-radius: 3px; background: var(--paper, #fff); }
.qfc-calendar .qfc-readout { width: 100%; }
.qfc-calendar .qfc-face { letter-spacing: -.04em; }
.qfc-calendar .qfc-hinge { background: var(--line, #d9e2e2); opacity: 1; }
.qfc-calendar .qfc-all-plaque { background: var(--paper, #fff); gap: 8px; }
.qfc-calendar .qfc-all-word { font-size: 25px; }
.qfc-calendar .qfc-rocker { display: flex; flex-direction: column; border: 1px solid var(--ink, #172a30); border-radius: 4px; overflow: hidden; }
.qfc-calendar .qfc-step { border: 0; border-radius: 0; min-height: 44px; flex-basis: 44px; }
.qfc-calendar .qfc-step-next { border-top: 1px solid var(--line, #d9e2e2); }
.qfc-calendar .qfc-step-previous svg { transform: rotate(90deg); }
.qfc-calendar .qfc-step-next svg { transform: rotate(90deg); }
.qfc-calendar .qfc-years { margin-top: 6px; }

/* Year strip: each split leaf is itself a year button, with a fixed All plaque on the right. */
.qfc-inline { --qfc-height: 55px; --qfc-type: 16px; --qfc-leaf-edge: #819397; }
.qfc-inline .qfc-layout { width: min(100%, 420px); }
.qfc-leaves { display: grid; grid-template-columns: repeat(var(--qfc-count), minmax(44px, 1fr)); gap: 4px; padding-block: 6px; }
.qfc-leaf { min-width: 44px; padding: 0 0 11px; border: 0; position: relative; background: none; }
.qfc-leaf .qfc-face { font-family: Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -.045em; border-radius: 3px; }
.qfc-leaf .qfc-face::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--qfc-leaf-edge); border-radius: 3px; z-index: 7; pointer-events: none; }
.qfc-leaf .qfc-half { color: var(--muted, #52666b); background: var(--paper, #fff); }
.qfc-leaf .qfc-upper[data-selected="true"] { background: var(--qfc-top); color: #fff; }
.qfc-leaf .qfc-lower[data-selected="true"] { background: var(--qfc-bottom); color: #fff; }
.qfc-leaf .qfc-hinge { background: linear-gradient(to right, var(--qfc-leaf-edge) 0 4px, transparent 4px calc(100% - 4px), var(--qfc-leaf-edge) calc(100% - 4px)); opacity: .65; }
.qfc-leaf-indicator { position: absolute; bottom: 0; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.qfc-leaf[aria-pressed="true"] .qfc-leaf-indicator { background: var(--teal, #15756f); }
.qfc-leaf-plaque { height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--qfc-leaf-edge); border-radius: 3px; font-size: 13px; font-weight: 700; color: var(--muted, #52666b); background: var(--paper, #fff); }
.qfc-leaf-plaque small { font-size: 8px; letter-spacing: .06em; }
.qfc-leaf-all[aria-pressed="true"] .qfc-leaf-plaque { background: var(--qfc-dark); color: #fff; border-color: var(--qfc-dark); }
.qfc-leaf:hover .qfc-face::after { border-color: var(--teal, #15756f); }
.qfc-leaf:hover .qfc-leaf-plaque { border-color: var(--teal, #15756f); }

:root[data-theme="dark"] .qfc-control { --qfc-dark: #0d1922; --qfc-top: #203440; --qfc-bottom: #172a35; --qfc-edge: #48606c; }
:root[data-theme="dark"] .qfc-calendar { --qfc-top: var(--paper); --qfc-bottom: var(--paper); }
:root[data-theme="dark"] .qfc-inline { --qfc-leaf-edge: #70858f; }
@container qfc (max-width: 350px) {
  .qfc-leaves { gap: 2px; }
  .qfc-desk .qfc-mechanism { gap: 10px; }
  .qfc-station .qfc-mechanism { gap: 7px; padding-inline: 8px; }
}
@container qfc (max-width: 330px) {
  .qfc-leaves { gap: 1px; }
}
@container qfc (max-width: 307px) {
  .qfc-years, .qfc-leaves { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .qfc-leaves { gap: 6px; }
  .qfc-year[data-year="all"], .qfc-leaf-all { grid-column: 4; }
  .qfc-desk .qfc-mechanism { gap: 6px; }
  .qfc-calendar .qfc-mechanism { padding-top: 0; }
  .qfc-calendar .qfc-years { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .qfc-control *, .qfc-control *::before, .qfc-control *::after { animation: none !important; transition: none !important; }
}