/* Pencil Box: the Department of Information flavor of Roma (Tomato Lab's design system,
   brand.tomatolab.org/roma). Same components and states as Roma's tl- classes, restyled. Components.
   Classes use the doi- prefix so they survive a rename of the system. Requires tokens/tokens.css.
   Everything is square: the only circles are radio
   buttons, badges and the seal itself.
   The .is-hover / .is-pressed / .is-focus classes only exist to show states in the docs. */

/* ---------- Button ---------- */
.doi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: var(--control-height-md);
  padding: 0 var(--space-24);
  border: 0;
  border-radius: var(--radius-none);
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
  font: var(--text-action-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
.doi-button:hover, .doi-button.is-hover { background: var(--color-action-primary-bg-hover); }
.doi-button:active, .doi-button.is-pressed { background: var(--color-action-primary-bg-pressed); }

.doi-button--secondary { background: var(--color-action-secondary-bg); color: var(--color-action-secondary-text); }
.doi-button--secondary:hover, .doi-button--secondary.is-hover { background: var(--color-action-secondary-bg-hover); }
.doi-button--secondary:active, .doi-button--secondary.is-pressed { background: var(--color-action-secondary-bg-pressed); }

.doi-button--outline {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-default);
}
.doi-button--outline:hover, .doi-button--outline.is-hover { background: var(--color-bg-muted); }
.doi-button--outline:active, .doi-button--outline.is-pressed { background: var(--color-bg-inverse); color: var(--color-text-inverse); }

/* Beaurocracy Blue: for the one action that must not be missed, and rarely. */
.doi-button--emphasis { background: var(--color-bg-emphasis); color: var(--color-text-on-emphasis); }
.doi-button--emphasis:hover, .doi-button--emphasis.is-hover { background: var(--color-blue-75); }
.doi-button--emphasis:active, .doi-button--emphasis.is-pressed { background: var(--color-blue-900); }

.doi-button--lg { height: var(--control-height-lg); padding: 0 var(--space-32); font: var(--text-action-lg); }

.doi-button:disabled, .doi-button[aria-disabled="true"] {
  background: var(--color-action-disabled-bg);
  color: var(--color-action-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
.doi-button--outline:disabled, .doi-button--outline[aria-disabled="true"] {
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-subtle);
}

/* ---------- Text input ---------- */
.doi-field { display: grid; gap: var(--space-8); max-width: 100%; }
.doi-field__label { font: var(--text-label-m); color: var(--color-text-primary); }
.doi-field__help { display: flex; align-items: center; gap: var(--space-4); font: var(--text-caption); color: var(--color-text-secondary); }

/* An open field on a ruled line, like a form: no box, a hairline underneath. */
.doi-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--space-12);
  border: 0;
  border-bottom: var(--border-width-1) solid var(--color-border-default);
  border-radius: var(--radius-none);
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  font: var(--text-body-m);
}
.doi-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.doi-input:hover, .doi-input.is-hover { box-shadow: inset 0 calc(-1 * var(--border-width-1)) 0 var(--color-border-default); }
.doi-input:focus-visible, .doi-input.is-focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 var(--border-width-2) var(--color-border-focus);
}
.doi-input[aria-invalid="true"] {
  border-color: var(--color-feedback-danger-fg);
  box-shadow: inset 0 calc(-1 * var(--border-width-2)) 0 var(--color-feedback-danger-fg);
}
.doi-input:disabled {
  background: transparent;
  border-bottom-style: dashed;
  border-color: var(--color-border-subtle);
  color: var(--color-action-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
.doi-field:has(.doi-input:disabled) .doi-field__label,
.doi-field:has(.doi-input:disabled) .doi-field__help { color: var(--color-text-muted); }
.doi-field:has(.doi-input[aria-invalid="true"]) .doi-field__help { color: var(--color-feedback-danger-fg); }
.doi-field:has(.doi-input[aria-invalid="true"]) .doi-field__help::before {
  content: "×";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--color-feedback-danger-fg);
  color: var(--color-bg-page);
  font: 700 13px/1 var(--font-text);
}

/* ---------- Checkbox, radio, toggle ---------- */
.doi-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font: var(--text-body-m);
  color: var(--color-text-primary);
  cursor: pointer;
}
.doi-choice:has(input:disabled) { color: var(--color-text-muted); cursor: not-allowed; }

.doi-checkbox, .doi-radio, .doi-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  box-sizing: border-box;
  border: var(--border-width-1) solid var(--color-border-default);
  background: transparent;
  cursor: inherit;
}
.doi-checkbox:hover, .doi-checkbox.is-hover,
.doi-radio:hover, .doi-radio.is-hover,
.doi-toggle:hover, .doi-toggle.is-hover { background-color: var(--color-bg-muted); }
.doi-checkbox.is-focus, .doi-radio.is-focus, .doi-toggle.is-focus {
  outline: var(--border-width-2) solid var(--color-border-focus);
  outline-offset: 2px;
}

.doi-checkbox { width: 22px; height: 22px; border-radius: var(--radius-none); display: inline-grid; place-items: center; }
.doi-checkbox::after { content: ""; width: 14px; height: 14px; }
.doi-checkbox:checked, .doi-checkbox:indeterminate {
  background-color: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-bg);
}
.doi-checkbox:checked:hover, .doi-checkbox:checked.is-hover { background-color: var(--color-action-primary-bg-hover); }
.doi-checkbox:checked::after {
  background: var(--color-action-primary-text);
  clip-path: polygon(10% 52%, 22% 40%, 40% 57%, 80% 16%, 92% 28%, 40% 82%);
}
.doi-checkbox:indeterminate::after { height: 2px; width: 12px; background: var(--color-action-primary-text); }

.doi-radio { width: 22px; height: 22px; border-radius: var(--radius-full); }
.doi-radio:checked {
  border-color: var(--color-action-primary-bg);
  background-image: radial-gradient(circle, var(--color-action-primary-bg) 5px, transparent 5.5px);
}

/* The toggle is square, like a switch on a control desk. */
.doi-toggle { position: relative; width: 44px; height: 24px; border-radius: var(--radius-none); }
.doi-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--color-border-default);
  transition: transform 120ms ease;
}
.doi-toggle:checked { background-color: var(--color-action-primary-bg); border-color: var(--color-action-primary-bg); }
.doi-toggle:checked:hover, .doi-toggle:checked.is-hover { background-color: var(--color-action-primary-bg-hover); }
.doi-toggle:checked::before { transform: translateX(20px); background: var(--color-action-primary-text); }
@media (prefers-reduced-motion: reduce) { .doi-toggle::before { transition: none; } }

.doi-checkbox:disabled, .doi-radio:disabled, .doi-toggle:disabled {
  background-color: var(--color-action-disabled-bg);
  border-color: var(--color-border-subtle);
}
.doi-checkbox:disabled::after, .doi-toggle:disabled::before { background: var(--color-action-disabled-text); }
.doi-radio:checked:disabled { background-image: radial-gradient(circle, var(--color-action-disabled-text) 5px, transparent 5.5px); }

/* ---------- Tag and badge ---------- */
.doi-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-default);
  font: var(--text-label-s);
  white-space: nowrap;
}
.doi-tag--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); box-shadow: none; }
.doi-tag--danger { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); box-shadow: inset 0 0 0 var(--border-width-1) var(--color-feedback-danger-fg); }
.doi-tag--success { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); box-shadow: none; }
.doi-tag--info { background: var(--color-feedback-info-bg); color: var(--color-feedback-info-fg); box-shadow: none; }
.doi-tag--warning { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-fg); box-shadow: none; }

.doi-badge {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: var(--text-label-s);
}
.doi-badge--dot { min-width: 0; width: 10px; height: 10px; padding: 0; background: var(--color-bg-accent); }

/* ---------- Running head ----------
   The manual's page furniture: a small label at each end over a hairline. */
.doi-running {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  margin: 0;
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width-1) solid var(--color-border-default);
  font: var(--text-caption);
  color: var(--color-text-primary);
}

/* ---------- Patterns ----------
   The texture library from the manual (pp. 22–23). The pattern is drawn in
   currentColor over the element's own background, so set both:
   <div class="doi-pattern doi-pattern--grid" style="color:…;background:…"></div> */
.doi-pattern { position: relative; isolation: isolate; }
.doi-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  -webkit-mask: var(--doi-pattern) repeat 0 0 / var(--doi-pattern-size);
  mask: var(--doi-pattern) repeat 0 0 / var(--doi-pattern-size);
  pointer-events: none;
}
.doi-pattern--dots {
  --doi-pattern-size: 12px 12px;
  --doi-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='1'/%3E%3C/svg%3E");
}
.doi-pattern--grid {
  --doi-pattern-size: 10px 10px;
  --doi-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 .5h10M.5 0v10' stroke='%23000'/%3E%3C/svg%3E");
}
.doi-pattern--lines {
  --doi-pattern-size: 8px 8px;
  --doi-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 .5h8' stroke='%23000'/%3E%3C/svg%3E");
}
.doi-pattern--diagonal {
  --doi-pattern-size: 10px 10px;
  --doi-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 2l4-4M0 10L10 0M8 12l4-4' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}
.doi-pattern--zigzag {
  --doi-pattern-size: 16px 9px;
  --doi-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 7l4-4 4 4 4-4 4 4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}
.doi-pattern--wave {
  --doi-pattern-size: 20px 9px;
  --doi-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='9'%3E%3Cpath d='M0 4.5C2.5 1.5 7.5 1.5 10 4.5S17.5 7.5 20 4.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* ---------- Broadcast interference ----------
   The look of the Department's late-1980s public-access television station:
   scan lines and a red/blue fringe. For headlines on Blue or Red fields only. */
.doi-broadcast { position: relative; isolation: isolate; overflow: hidden; }
.doi-broadcast > * { text-shadow: -2px 0 rgba(255, 37, 118, 0.85), 2px 0 rgba(0, 255, 255, 0.55); }
.doi-broadcast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}