/* The roller's own controls, drawn by custom-controls.js instead of by the
 * browser. See the top of that file for why, and for what is left untouched.
 *
 * EVERY WIDTH IN A DICE LINE IS SET HERE. They add up, and that is the point:
 *
 *   main row     count 32 + die 50 + signed modifier 42 + target 60 = 184
 *
 * The +/- used to be its own 18px box. It now lives inside the modifier
 * ("+2", "-3"), and its 18px went to the die, the modifier and the target.
 *
 * 184 is the width the row has always had in Chrome: .d-line is 192px outside,
 * less its 2px border and the span's 2px padding on each side. Firefox and
 * Safari used to make it 186-190 by drawing wider number boxes, which is what
 * pushed "per die" out of the line. Change one width and take it back off a
 * neighbour, or the line grows.
 *
 * The widths were measured, not guessed: in Times at 16px, the widest thing
 * each box has to show is "99" (16px), "d100" (32), "+" (9), "to each"
 * (45.8), "Reroll" (40), "highest" (46.2), "Maximum" (66.7). Identical in
 * Chrome, Safari and Firefox on 2026-09-26. On a system with no Times the
 * fallback serif may be wider; a box then clips rather than grows, so the line
 * holds its shape either way.
 *
 * Colours are theme tokens only (docs/THEMES.md). */

/* ── the line itself ────────────────────────────────────────────────── */

/* 188 inside + 2px border each side = the 192px Chrome always drew. Firefox
   drew 194: the label box above the row asks for its own default width, and
   .d-line only had a min and a max, so the widest thing inside won. */
.d-line {
  width: 188px;
}

/* ── the native controls, once replaced ─────────────────────────────── */

.d-line select[data-cc],
.d-line .cc-select[data-cc-hidden],
.d-line .cc-num[data-cc-hidden] {
  display: none;
}

/* ── a select, drawn as a button ────────────────────────────────────── */

.d-line .cc-select {
  display: inline-flex;
  align-items: center;
  flex: none;
  box-sizing: border-box;
  height: 18px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 2px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-family: Times, 'Times New Roman', serif;
  font-size: 1em;
  font-weight: normal;
  line-height: 18px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.d-line .cc-select:hover {
  background-color: var(--bg-hover);
}

.d-line .cc-select:active {
  transform: none;
}

.d-line .cc-select:focus-visible,
.d-line .cc-num:focus-within {
  outline: 1px solid var(--theme-primary);
  outline-offset: -1px;
}

/* The label is an <i> so no .d-line span or p rule reaches it; a site-wide
   rule gives <i> Georgia, so it is told to take the button's font instead. */
.cc-select .cc-text,
.cc-option .cc-text {
  font: inherit;
  font-style: normal;
}

/* main row */
.d-line .cc-d-type     { width: 50px; padding-left: 2px; gap: 2px; }
.d-line .cc-pos-neg    { width: 18px; padding: 0; justify-content: center; }
.d-line .cc-mod-target { width: 60px; padding-left: 4px; }

/* options rows */
.d-line .cc-ignore-reroll { width: 40px; padding: 0; }
.d-line .cc-low-high      { width: 47px; padding: 0; }
.d-line .cc-min-max       { width: 67px; padding: 0; }

/* ── the die wireframe ──────────────────────────────────────────────── */

.cc-die {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--theme-primary);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ── a number input, with its own arrows ────────────────────────────── */

.d-line .cc-num {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  box-sizing: border-box;
  height: 18px;
  background-color: var(--bg-input);
}

.d-line .cc-num:hover {
  background-color: var(--bg-hover);
}

.d-line .cc-num input[type=number] {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  max-width: none;
  height: 18px;
  background-color: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.d-line .cc-num input[type=number]:focus {
  outline: none;
}

.d-line .cc-num input[type=number]::-webkit-inner-spin-button,
.d-line .cc-num input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.d-line .cc-d-count    { width: 32px; }
.d-line .cc-d-mod      { width: 32px; }
.d-line .cc-signed     { width: 42px; }

/* "+2" / "-3": the sign and the size in one box. See enhanceSigned(). */
.d-line .cc-signed-box {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 18px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--text-primary);
  font-family: Times, 'Times New Roman', serif;
  font-size: 1em;
  text-align: center;
  cursor: text;
}

.d-line .cc-signed-box:hover {
  background-color: transparent;
}

.d-line .cc-signed-box:focus {
  outline: none;
}
.d-line .cc-drop-count { width: 26px; }
.d-line .cc-limiter    { width: 26px; }

.d-line .cc-step {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 9px;
  color: var(--text-secondary);
}

.d-line .cc-arrow {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.d-line .cc-arrow:hover {
  color: var(--theme-primary);
}

.d-line .cc-arrow::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}

.d-line .cc-up::before   { border-bottom: 4px solid currentColor; margin-top: 1px; }
.d-line .cc-down::before { border-top: 4px solid currentColor; margin-bottom: 1px; }

/* ── the open menu ──────────────────────────────────────────────────── */

/* On <body>, not in the line: .d-line clips its contents. */
.cc-menu {
  position: absolute;
  z-index: 10000;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;   /* flicking the list does not scroll the page */
  -webkit-overflow-scrolling: touch;
  padding: 3px 0;
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--theme-primary);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); /* allowed: depth shadow, not a theme colour */
  font-family: Times, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* font: inherit because assets/stylesheet.css gives `*` Georgia. */
.cc-option {
  font: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 14px 0 9px;
  cursor: pointer;
}

.cc-option.cc-active {
  background-color: var(--bg-hover);
}

/* Bold, not the accent colour: on the dark themes the accent on the hover
   background was hard to read. The die beside it carries the accent. */
.cc-option.cc-selected {
  font-weight: 700;
}

.cc-menu .cc-die {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}