/* ============================
   VIRTUAL ALBUM – BASE / CONTROLS
   ============================ */
   
.album-hint{
  margin-top: 14px;
  margin-bottom: 10px;
  text-align: center;
  color: #6b645c;
  font-style: italic;
  letter-spacing: 0.02em;
}

.album-hint-link{
  color: #385F5F;              /* your brand green */
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted rgba(56,95,95,0.4);
}

.album-hint-link:hover{
  border-bottom-style: solid;
}



body{
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.small{ color:#555; font-size:0.92rem; }

/* ---- Link hygiene inside the album (kills purple/underline everywhere) ---- */
.album-sheet a,
.album-sheet a:visited,
.album-sheet a:hover,
.album-sheet a:active,
.album-sheet a:focus{
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* ---- Numerals: stop “dipping” digits, make scanning easier ----
   Lining numerals keep all digits sitting on the baseline.
   Tabular numerals make widths consistent (nice in meta bars). */
.album-sheet{
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- UI text in the top bars: use a clean UI sans (keeps album serif elsewhere) ---- */
.album-page-sheet .album-line1,
.album-page-sheet .album-line2,
.album-page-sheet .meta,
.album-page-sheet .filterbox,
.album-page-sheet button,
.album-page-sheet input[type="text"],
.album-page-sheet .check{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Header rail padding (driven by JS so it aligns to slot 1) ---- */
.album-page-sheet{
  --rail-left: 10px;   /* fallback */
  --rail-right: 10px;
}

/* Apply rail padding to header + both top lines */
.album-page-sheet .album-header,
.album-page-sheet .album-line1,
.album-page-sheet .album-line2{
  padding-left: var(--rail-left);
  padding-right: var(--rail-right);
  box-sizing: border-box;
}

/* ---- Controls “toolbar” look (subtle paper UI) ---- */
.controls{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;

  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.38);
}

/* ---- Segment switch: Plates / Letterings ---- */
.switch{
  display: inline-flex;
  border: 1px solid #bdb5a7;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.60);
}

.switch a{
  display: inline-block;
  padding: 8px 14px;
  font-weight: 600;
  letter-spacing: 0.1px;

  /* explicit: kill purple/underline */
  color: inherit;
  text-decoration: none;
}

.switch a:visited{ color: inherit; }

.switch a + a{
  border-left: 1px solid #bdb5a7;
}

.switch a.active{
  background: rgba(255,255,255,0.88);
}

/* ---- Filter groups (platesFilter / lettersFilter) ---- */
.filterbox{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.filterbox .spacer{
  margin-left: 8px;
}

/* ---- INPUTS (reduce width by ~50%) ---- */
/* Default inputs */
input[type="text"]{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #bdb5a7;

  /* was 90px; now ~50% narrower */
  min-width: 45px;
  width: 60px;

  background: rgba(255,255,255,0.70);
  font-family: inherit;
}

/* Specific ones that want 2 letters only */
#clInput{
  width: 46px;   /* tight but comfy for AA */
}

/* Plate number inputs */
#plateInput,
#platePosInput{
  width: 60px;
}

/* ---- Buttons ---- */
button{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #bdb5a7;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  font-family: inherit;
}

button:hover{
  background: rgba(255,255,255,0.80);
}

/* Checkbox pill */
.check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 10px;
  border: 1px solid #bdb5a7;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  user-select:none;
}

/* Selection status line */
#selStatus{
  margin-left: 6px;
}

/* Meta: now used as inline, keep it clean */
.meta{
  line-height: 1.35;
}

/* Grid wrapper stays scroll-safe */
.grid-wrap{
  overflow-x: auto;
}