@layer components {
  .graph-outer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* The board with its labels around it (#1144, #1146): the optional heading
     across the top, the y title in the first column rotated to read up the
     axis, the x title under the board. The heading row collapses to nothing
     when the item does not ask for one. */
  .graph-figure {
    align-items: center;
    display: grid;
    gap: 0.25rem;
    grid-template-areas:
      ".      title"
      "ytitle board"
      ".      xtitle";
    grid-template-columns: auto minmax(0, 1fr);
    max-inline-size: 43rem;
    position: relative;

    /* The entry the student writes a blank heading or axis title into (#1146). It
       has to read as something to fill in rather than as an empty label, so it
       keeps a border and a minimum width where the display fields below drop
       both. */
    .graph-label-entry {
      --graph-label-entry-border-style: dashed;

      background: var(--color-surface);
      border: 1px var(--graph-label-entry-border-style) var(--color-border);
      border-radius: 4px;
      min-inline-size: 12rem;
      padding: 0.15rem 0.35rem;

      &:focus-within {
        --graph-label-entry-border-style: solid;

        outline: 2px solid var(--color-focus);
        outline-offset: 1px;
      }
    }
  }

  .graph-title,
  .graph-axis-title {
    color: var(--color-text);
    margin: 0;
    text-align: center;

    /* base.css drops the input box from read-only math-fields; a label also
       needs one on its text's line and size. */
    math-field {
      display: inline-block;
      font-size: inherit;
      padding: 0;
      vertical-align: middle;
    }
  }
  .graph-title {
    font-weight: 600;
    grid-area: title;
  }
  /* The y title is rotated so it reads bottom-to-top alongside the axis, the way
     it is printed on an exam paper. vertical-rl reads top-to-bottom, so it is
     turned the rest of the way round. */
  .graph-axis-title {
    --graph-axis-title-area: xtitle;
    --graph-axis-title-transform: none;
    --graph-axis-title-writing-mode: horizontal-tb;

    font-size: 0.85rem;
    grid-area: var(--graph-axis-title-area);
    transform: var(--graph-axis-title-transform);
    writing-mode: var(--graph-axis-title-writing-mode);

    &.graph-axis-title--y {
      --graph-axis-title-area: ytitle;
      --graph-axis-title-transform: rotate(180deg);
      --graph-axis-title-writing-mode: vertical-rl;
    }
  }

  .graph-board {
    aspect-ratio: 4 / 3;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    grid-area: board;
    inline-size: 100%;
    max-inline-size: 40rem;
    touch-action: none;

    &.graph-board--readonly { pointer-events: none; }
  }

  .graph-tick-label { fill: var(--color-text-secondary); }

  /* Gradient, rise, run and intercept labels. Only rendered at all when the
     item sets show_derived_values, and always rendered for the marker. */
  .graph-derived {
    fill: var(--color-text-secondary);
    font-size: 0.75rem;
  }

  /* A student's note on the graph (#1158): an arrow's note or a comment, in
     the student's colour (set by graph_tools). Backed so it stays legible over
     the grid, and wrapped so a long note stays on the board. Plain text only;
     graph_tools escapes it. */
  .graph-comment {
    background: var(--color-surface);
    font-size: 0.8rem;
    line-height: 1.2;
    max-inline-size: 10rem;
    padding: 0 0.2rem;
    white-space: normal;
  }

  /* "Not plottable yet", while an expression is half-typed, is a warning. A note,
     not an error: the last valid curve is still on screen and nothing was lost. */
  .graph-hint {
    --graph-hint-color: var(--color-text-secondary);

    color: var(--graph-hint-color);
    font-size: 0.85rem;

    &.graph-hint--warning {
      --graph-hint-color: var(--color-danger-text);

      margin-block-start: 0.3rem;
    }
  }

  /* The toolbar above the board (#1237): one segmented strip whatever tools
     the author enabled, with past five of them folded into groups. Pressed,
     hover and checked states only set --graph-tool-*. */
  .graph-toolbar-host {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .graph-toolbar {
    align-self: flex-start;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
  }
  .graph-toolbar__tool,
  .graph-toolbar__caret,
  .graph-toolbar__item {
    --graph-tool-background: transparent;

    align-items: center;
    background: var(--graph-tool-background);
    border: 0;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    min-block-size: 2.25rem;

    &:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 1px;
    }
  }
  .graph-toolbar__tool,
  .graph-toolbar__caret {
    --graph-tool-padding-inline-end: 0.65rem;

    border-radius: 6px;
    display: inline-flex;
    gap: 0.35rem;
    padding-block: 0;
    padding-inline: 0.65rem var(--graph-tool-padding-inline-end);
  }
  .graph-toolbar__tool {
    &:hover:not(:disabled) { --graph-tool-background: var(--color-primary-tint); }
    &[aria-pressed="true"] {
      --graph-tool-background: var(--color-surface);

      box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
      color: var(--color-primary);
      font-weight: 600;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }
  }
  .graph-toolbar__caret {
    padding-inline: 0.35rem;

    &:hover { --graph-tool-background: var(--color-primary-tint); }
  }
  .graph-toolbar__separator {
    background: var(--color-border);
    inline-size: 1px;
    margin: 0.35rem 0.2rem;
  }
  .graph-toolbar__group {
    display: inline-flex;
    position: relative;

    > .graph-toolbar__tool { --graph-tool-padding-inline-end: 0.3rem; }
  }
  .graph-toolbar__menu {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
    display: flex;
    flex-direction: column;
    gap: 2px;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 0;
    min-inline-size: 14rem;
    padding: 0.35rem;
    position: absolute;
    z-index: 20;
  }
  .graph-toolbar__item {
    border-radius: 5px;
    display: flex;
    gap: 0.6rem;
    padding: 0 0.6rem;
    text-align: start;

    > span:first-of-type { flex: 1 1 auto; }

    &:hover,
    &[aria-checked="true"] { --graph-tool-background: var(--color-primary-tint); }
  }
  .graph-toolbar__clicks {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
  }
  /* One line of guidance for the armed tool, and the pointer-free way to
     place its object. */
  .graph-toolbar__status {
    align-items: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.5rem;
    min-block-size: 2rem;
  }
  .graph-toolbar__step {
    background: var(--color-primary-tint);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 600;
    padding: 0.05rem 0.5rem;
  }

  /* The selected object's details, beside it on the board. Positioned by
     lib/graph_workspace within the figure. */
  .graph-popover {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    inline-size: max-content;
    max-inline-size: min(22rem, 100%);
    padding: 0.6rem;
    position: absolute;
    z-index: 10;

    &[hidden] { display: none; }
  }
  .graph-popover__rows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .graph-popover__remove {
    --btn-color: var(--color-danger-text);

    align-self: flex-start;
    min-block-size: 2.25rem;
  }

  /* The tools with no place on the board: the function, a parameter, the
     squares counted. Collapses when no enabled tool needs it. */
  .graph-inline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-inline-size: 43rem;

    &:empty { display: none; }

    > .graph-panel__row { flex: 0 1 auto; }
    .graph-panel__row-label { flex: 0 0 auto; }
    .graph-panel__input { inline-size: 6rem; }
    .graph-panel__input--text { inline-size: 14rem; }
  }

  /* The row whose object is being pointed at or focused on the board (#1151).
     The board highlights the object in the same colour, so the two halves of
     one object always light up together. */
  .graph-panel__row {
    --graph-panel-row-accent: transparent;
    --graph-panel-row-background: transparent;

    align-items: center;
    background: var(--graph-panel-row-background);
    border-inline-start: 3px solid var(--graph-panel-row-accent);
    border-radius: 0.25rem;
    display: flex;
    gap: 0.4rem;
    padding: 0.1rem 0.3rem;

    &.graph-panel__row--active {
      --graph-panel-row-accent: light-dark(#7a1a14, var(--color-danger-text));
      --graph-panel-row-background: light-dark(#fdeceb, var(--color-danger-surface));
    }
  }
  .graph-panel__row-label {
    flex: 0 0 7rem;
    font-size: 0.85rem;
  }
  .graph-panel__input {
    inline-size: 5.5rem;
    min-block-size: 2.25rem;
  }
  /* An expression or a note needs room that a coordinate does not. Single classes, so
     .graph-inline's widths above still win. */
  .graph-panel__input--note,
  .graph-panel__input--text {
    flex: 1 1 10rem;
    inline-size: auto;
  }
  .graph-panel__input--text { font-family: var(--font-mono, monospace); }
  .graph-panel__select {
    font-size: 0.85rem;
    min-block-size: 2.25rem;
    min-inline-size: 6rem;
  }

  /* The key to a board with more than one set of data (#1235). Glyphs take
     the colour each set is drawn in on the board (graph_tools): blue supplied,
     red plotted. */
  .graph-legend {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
  }
  .graph-legend__entry {
    &.graph-legend__entry--supplied { --graph-legend-colour: #1f4e79; }
    &.graph-legend__entry--plotted { --graph-legend-colour: #b3261e; }
  }
  .graph-legend__marker {
    color: var(--graph-legend-colour, currentColor);
    display: inline-block;
    font-weight: 700;
    inline-size: 1em;
    text-align: center;
  }
  .graph-legend__source {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  /* Marker-side: the expression the student typed, beside the curve it drew. */
  .graph-expression {
    font-size: 0.9rem;
    margin-block-start: 0.5rem;
  }
  .graph-working { margin-block-start: 0.75rem; }
  .graph-working-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-block-end: 0.25rem;
  }

  /* Marker-only comparison of each expected object against what the student
     produced. Never rendered on the student side. */
  .graph-comparison {
    border-collapse: collapse;
    font-size: 0.85rem;
    inline-size: 100%;
    margin-block-start: 0.75rem;

    th,
    td {
      border-block-end: 1px solid var(--color-border);
      padding: 0.3rem 0.5rem;
      text-align: start;
    }
  }
  .graph-comparison__row--within { color: var(--color-text); }
  .graph-comparison__row--outside,
  .graph-comparison__row--missing {
    td:last-child {
      color: var(--color-danger-text);
      font-weight: 600;
    }
  }
}