/* App-level interaction states layered on top of the vendored DoodleCSS,
   which ships with focus-visible styling but no hover/idle distinction —
   every bordered control uses the same dark hand-drawn stroke all the time.
   Here the border starts light and only turns dark (the vendored button.svg
   / border.svg) on hover or focus, so idle controls read as quieter. */

.doodle button,
.doodle .doodle-border,
.doodle select,
.doodle input:not([type='checkbox']):not([type='radio']) {
  border-image: url(/button-light.svg) 10 10 10 10 stretch stretch;
}

.doodle fieldset,
.doodle textarea {
  border-image: url(/border-light.svg) 10 10 10 10 stretch stretch;
}

/* A disabled radio already greys its `-` glyph (DoodleCSS's own
   `:disabled:after { color: grey }`), but the ring is a border-image — an SVG
   stroke baked at #3c3c3c — which `color` can't touch, so the border stayed
   full black and the option still read as selectable. Fading the whole glyph
   dims the ring along with it. */
.doodle input[type='radio']:disabled {
  opacity: 0.4;
}

.doodle button:hover:not(:disabled),
.doodle .doodle-border:hover,
.doodle select:hover,
.doodle input:not([type='checkbox']):not([type='radio']):hover,
.doodle button:focus-visible,
.doodle .doodle-border:focus-visible,
.doodle select:focus-visible,
.doodle input:not([type='checkbox']):not([type='radio']):focus-visible {
  border-image: url(/vendor/doodle/button.svg) 10 10 10 10 stretch stretch;
}

.doodle button.primary,
.doodle .doodle-border.primary {
  border-image: url(/vendor/doodle/button.svg) 10 10 10 10 stretch stretch;
}

.doodle fieldset:hover,
.doodle textarea:hover,
.doodle textarea:focus-visible {
  border-image: url(/vendor/doodle/border.svg) 10 10 10 10 stretch stretch;
}

.doodle button,
.doodle .doodle-border,
.doodle select,
.doodle input[type='checkbox'],
.doodle input[type='radio'] {
  cursor: pointer;
}

/* Not every button in this app is a <button>: a modal trigger is a <span>
   inside a <label>, a dropdown trigger is a <summary>, and the home page's
   calls to action are <a>. All three wear .doodle-border to get the button
   frame, but DoodleCSS only sets font and colour on the real element —
   `.doodle button { font-family; font-size: 1em; color: #3c3c3c }` — so the
   impostors just inherit whatever surrounds them. That made them drift:
   the <a> ones picked up `.doodle a { color: #1c1c1c; font-weight: bold }`
   and came out darker and bolder than a real button, while the others sat
   at whatever colour their container set.

   Stating the same four properties here is what actually makes "a button
   looks like a button" true, rather than true by coincidence. The rules
   above already treat the two as one thing for border and cursor; this
   finishes the job. `.doodle .doodle-border` (0,2,0) outranks `.doodle a`
   (0,1,1), so the link-buttons follow too. */
.doodle .doodle-border {
  font-family: 'Short Stack', cursive;
  font-size: 1em;
  font-weight: normal;
  color: #3c3c3c;
}

/* Same box, too, declared once so "all buttons" is true: no block padding, so
   a button is the 10px hand-drawn border either side of one 20px line — 40px. */
.doodle button,
.doodle .doodle-border {
  padding: 0 14px;
}

/* The floating-action variant is deliberately larger. Listed after the rule
   above at equal specificity so it wins, and unlayered like the rest —
   the css() rules the components use are layered, and layered always loses
   to unlayered no matter the specificity. */
.doodle .modal-fab {
  padding: 14px 22px;
}

/* The other half of a form row: a <select> or text <input> beside a button
   takes no block padding either, so the row stands at one height. Only the
   block padding is stated: a select's inline padding is DoodleCSS's caret
   allowance (`padding-right: 1.5em`) and an input's is the browser's.

   A <textarea> keeps 4px: it holds prose, not one line, and on no padding its
   first line sits against the border. It is also left out of the line-height
   rule below, which exists to make one-line controls agree on a height. */
.doodle textarea {
  padding-block: 4px;
}

.doodle select,
.doodle input:not([type='checkbox']):not([type='radio']) {
  padding-block: 0;
}

/* Padding gets them to the same height while Short Stack is rendering, but the
   font arrives over the network and `line-height: normal` is read off whatever
   is rendering at the time: with the fallback the select comes out a pixel
   short of the button, because a select's text box and a button's line box
   round a font's metrics differently. Stating the number makes the shared box
   the same whichever font renders. 1.25 is 20px at the app's 16px, which is
   exactly Short Stack's own normal line box — so nothing moves when it loads,
   and nothing drifts when it doesn't. */
.doodle button,
.doodle .doodle-border,
.doodle select,
.doodle input:not([type='checkbox']):not([type='radio']) {
  line-height: 1.25;
}

/* Labels that are a click target and nothing more: they must contribute no box
   of their own. Without this they add DoodleCSS's `.doodle label { padding:
   .25em 0 }` — the ~8px that made an "Edit" modal trigger visibly taller than
   a "Save changes" button. This is the rule modal.tsx's comment refers to; it
   can only be beaten from an unlayered stylesheet, which is why it's here and
   not there. */
.doodle label.modal-trigger {
  padding: 0;
}

/* A Field's <label> is a wrapper around a stacked label-and-control, not a line
   of text, but `.doodle label { padding: .25em 0 }` still hung 4px under the
   control. In a row that bottom-aligns its items — the status filter and its
   button — that padding is what the button lines up with, so the field sat 4px
   high even once the two were the same height. Forms space stacked fields with
   their own `gap`, so the padding was only ever incidental. Here rather than in
   field.tsx for the usual reason: a layered css() rule cannot outrank an
   unlayered Doodle one. */
.doodle label.field {
  padding: 0;
}

/* The "Not for me" chip in the rating picker. Its border, radius and colours
   live with the component in star-rating.tsx; only the padding is here, for the
   same reason as the modal trigger above — `.doodle label { padding: .25em 0 }`
   sets the inline padding to zero, and a layered css() rule cannot outrank an
   unlayered one at any specificity. Set there, it is dropped without a word and
   the pill draws about a pixel off the text on each side.

   Generous at the ends because the 999px radius curves back over them: the text
   otherwise begins while the border is still closing and reads as touching it.

   Inline only. The chip's height is fixed to the star size in star-rating.tsx
   and the line-height centres the text within it, so vertical padding here
   would only push it back off. */
.doodle label.rating-choice {
  padding: 0 26px;
}

/* Every page's title starts flush with the top of <main>, rather than 0.67em
   (~21px) down where the browser puts an <h1>. Here rather than on Page's own
   <h1> so it also holds for a page that places its heading inside its own
   layout. Only the top: the space under a title is each page's call, set with
   css() rules this unlayered one would override. */
.doodle main h1 {
  margin-top: 0;
}

/* Rating/notes only make sense once something's actually been watched —
   reacts live to the status <select> with no JS, via :has() + option:checked. */
.watched-only-fields {
  display: none;
}

form:has(select[name='status'] option[value='consumed']:checked) .watched-only-fields {
  display: flex;
}

/* Destructive actions (delete log). Needs the element selector to outrank
   DoodleCSS's own `.doodle button { color: #3c3c3c }`. */
.doodle button.danger {
  color: #c33;
}

.doodle button.danger:hover:not(:disabled) {
  color: #a11;
}

/* A submit that has to read as a sentence rather than a control: the "actually
   the same film" escape under a duplicate card, where the button beside it is
   the action and this is the disagreement. `.doodle button` sets border-image,
   padding and colour from an unlayered rule, so a layered css() declaration is
   dropped without a word — which is why this lives here, like the modal trigger
   and rating chip above. */
.doodle button.linkish,
.doodle a.linkish {
  padding: 0;
  font-weight: normal;
  font-size: 13px;
  color: #6b6459;
  text-decoration: underline;
}

.doodle button.linkish:hover,
.doodle a.linkish:hover {
  color: #3c3c3c;
}

/* Buttons that read as text or an icon rather than a control. Unlayered, like
   the rules above, so css() can't do this. */
.doodle button.linkish,
.doodle button.bare,
.doodle button.checkline {
  border: 0;
  border-image: none;
  background: none;
  cursor: pointer;
}

.doodle button.bare {
  padding: 4px 8px;
  color: #888;
}

.doodle button.bare:hover:not(:disabled),
.doodle button.checkline:hover:not(:disabled) {
  color: #3c3c3c;
}

/* A submit drawn as Doodle's checkbox (or radio, with .radio on the box).
   While posting it shows the state it is heading to. */
.doodle button.checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 13px;
  color: #6b6459;
  text-align: left;
}

.doodle .checkline-box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 5px;
  border-image: url(/vendor/doodle/checkbox.svg) 6 6 6 6 stretch stretch;
  font-size: 14px;
}

.doodle .checkline-box.radio {
  border-width: 10px;
  border-image: url(/vendor/doodle/radio.svg) 16 16 16 16 stretch stretch;
}

.doodle button.checkline.ticked .checkline-box::after,
.doodle button.checkline:disabled .checkline-box::after {
  content: '*';
  font-size: 1.2em;
  margin-bottom: -0.3em;
}

.doodle button.checkline.ticked:disabled .checkline-box::after {
  content: none;
}

/* FloatingDropdown's `compact` trigger — the same sketched border at half the
   width, for one that sits beside a heading rather than in a row of buttons.
   Here because `.doodle-border` is unlayered and sets the width. */
.doodle .doodle-border.compact {
  border-width: 5px;
  padding: 1px 4px;
  line-height: 1.3;
}

/* A choice in a dropdown list, as a row rather than a button: the where-to-watch
   country picker, where each country is its own submit button. Doodle gives
   every button a sketched border and centred text, unlayered, so this undoes
   both here. With no border to darken, focus shows as an outline instead. */
.doodle button.menu-choice {
  border: none;
  border-image: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.doodle button.menu-choice:hover,
.doodle button.menu-choice:focus-visible {
  background-color: #efe6db;
}

.doodle button.menu-choice:focus-visible {
  outline: 2px solid #3c3c3c;
  outline-offset: -2px;
}

.doodle button.menu-choice[aria-current] {
  font-weight: bold;
}