/* The look of the fixes editor (fixes_panel.js, docs/design/fixes_editor.md): only its own content. The panel is roadstyle's editor frame (the title line,
   the tabs, the body that scrolls, the bar under the body), and the buttons, the links, the option rows (rs-opt) and the select boxes are roadstyle's
   parts (roadstyle docs/guides/dashboard-parts.md). Every rule starts with #fix-panel, the root of the frame. The colours are roadstyle's tokens of the
   panel: --ink, --mut, --line, --card, --bg, --accent and --rs-hover-bg. */
#fix-panel { --fix-bad: color-mix(in srgb, #dc2626 75%, var(--ink)); }      /* a red that is darker on a light panel and lighter on a dark one */
#fix-panel *, #fix-panel *::before, #fix-panel *::after { box-sizing: border-box; }
#fix-panel .muted { color: var(--mut); }
#fix-panel .small { font-size: 12.5px; }
#fix-panel .why { margin: 6px 0 0; font-size: 12.5px; color: var(--mut); }
#fix-panel .why:empty { display: none; }
#fix-panel .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
#fix-panel .grid2 { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
#fix-panel code { font-size: 11.5px; overflow-wrap: anywhere; }      /* a long path breaks; a short name goes to the next line whole */
/* a box of a pane (roadstyle's rs-sec-box has its look only in a card of the panel, not in a frame) */
#fix-panel .fsec { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 10px; background: var(--card); }
#fix-panel .fsec-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
#fix-panel .fsec-hd h3 { margin: 0; }
#fix-panel .fsec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mut); }
#fix-panel .fsec.danger { border-color: var(--fix-bad); }
#fix-panel .fsec.danger h3, #fix-panel #fix-delete, #fix-panel button.danger { color: var(--fix-bad); }
#fix-panel .chg.del { border-left-color: #dc2626; }
#fix-panel .fsec .fixgrid { margin-top: 0; grid-template-columns: 10em 1fr; }
#fix-panel .fsec > .row:first-of-type, #fix-panel .fsec > p.why + .row { margin-top: 0; }
/* the bars of the panes, in the frame's bar: the one of the pane that shows */
#fix-panel .fix-bar.off { display: none; }
#fix-panel .fix-bar .row { margin-top: 0; }
#fix-panel .fix-bar p { margin: 6px 0 0; }
#fix-panel #fix-apply { width: 100%; }
#fix-panel button.busy::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 7px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--mut); animation: fix-spin 0.8s linear infinite; }
@keyframes fix-spin { to { transform: rotate(360deg); } }
#fix-panel .barline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
#fix-panel .barline .link { white-space: nowrap; }
@media (max-width: 700px) { #fix-panel .long { display: none; } }
html.rs-phone #fix-panel :is(.row, .wallbar) button { min-height: 44px; }      /* a finger's size on a phone, as the design panel's buttons */
@media (min-width: 701px) { #fix-panel .short { display: none; } }
#fix-panel .fix-bar .row button { flex: 1 1 0; white-space: nowrap; }
#fix-panel .fix-bar .row button.sb-primary { flex: 1 1 100%; }
/* the bar of the object form: one row, the main button wide and Reset or Remove at its side; the bar is one line when no button can act */
#fix-panel #fix-actions .barline { margin-bottom: 0; }
#fix-panel #fix-btns { flex-wrap: nowrap; margin-top: 8px; }
#fix-panel #fix-btns button { flex: none; }
#fix-panel #fix-btns button.sb-primary { flex: 1 1 auto; }
#fix-panel .fix-pending { border: 1px solid #f59e0b; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: rgba(245, 158, 11, 0.1); }
#fix-panel .fix-pending b { display: block; margin-bottom: 4px; }
#fix-panel .fix-group { margin: 12px 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mut); }
#fix-panel .bits { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
#fix-panel .bits li { display: flex; gap: 6px; }
#fix-panel .bits .k { color: var(--mut); min-width: 6.5em; }
#fix-panel .bits .was { color: var(--mut); text-decoration: line-through; }
#fix-panel .fix-pane { margin-top: 2px; }
#fix-panel .fix-pane .grid2 { grid-template-columns: 10em 1fr; }      /* the label column of the forms (this rule wins over .fsec .fixgrid) */
#fix-panel .fixgrid { margin-top: 10px; }
#fix-panel .turn { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin-top: 6px; padding: 4px 6px; border-radius: 6px; border-left: 3px solid transparent; cursor: pointer; }
#fix-panel .turn .rs-sel { max-width: 11em; }
#fix-panel .fix-obj { margin-top: 10px; }
#fix-panel .fix-obj.loading, #fix-panel #fix-out.loading { opacity: .55; }      /* the last object, while the next one loads: the form below does not move */
#fix-panel .objhead { font-weight: 600; }
#fix-panel .alltags { margin-top: 6px; font-size: 12px; }
#fix-panel .alltags table { border-collapse: collapse; margin-top: 4px; width: 100%; }
#fix-panel .alltags td { padding: 1px 6px 1px 0; vertical-align: top; word-break: break-word; }
#fix-panel .alltags td:first-child { color: var(--mut); white-space: nowrap; }
#fix-panel label.edited { color: #b45309; }          /* not bold: a bold label with its dot and ↺ wraps */
#fix-panel label.edited::before { content: "● "; color: #f59e0b; }
#fix-panel label.edited:has([data-revert])::before { content: none; }      /* a change in your changes: its color and ↺ mark it; the dot is for an edit not added yet */
#fix-panel .colorrow { display: grid; grid-template-columns: 1fr 38px; gap: 6px; }
#fix-panel .colorrow input[type=color] { width: 38px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
#fix-panel .other { display: flex; flex-direction: column; gap: 6px; }
#fix-panel .otherrow { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 6px; align-items: center; }
#fix-panel .otherrow.add { grid-template-columns: 1fr 1fr auto; }
#fix-panel .otherrow .k { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fix-panel .otherrow.edited .k { color: #b45309; font-weight: 600; }
#fix-panel .fix-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
#fix-panel .chg { border: 1px solid var(--line); border-left: 4px solid #f59e0b; border-radius: 10px; padding: 6px 10px; cursor: pointer; background: var(--bg); }
#fix-panel .walls { display: flex; flex-direction: column; gap: 4px; }
#fix-panel .wallrow { display: grid; grid-template-columns: 3.6em 1fr 1fr; gap: 4px 6px; align-items: center; padding: 6px; border-left: 3px solid transparent; border-radius: 6px; cursor: pointer; }
#fix-panel .wallrow > .small { grid-column: 2 / 4; }
#fix-panel .wallrow > .rs-sel:has([data-wall]) { grid-column: 2; }
#fix-panel .wallrow > .rs-sel:has([data-walldoor]) { grid-column: 3; }       /* line 1: the number, the length and the street; line 2: the type and the door, side by side */
#fix-panel .doors { display: flex; flex-direction: column; gap: 4px; }
#fix-panel .doorrow { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 6px; align-items: center; padding: 2px 4px; border-left: 3px solid transparent; border-radius: 6px; cursor: pointer; }
#fix-panel .doorrow .rs-sel { max-width: 11.5em; }
#fix-panel .wallbar { display: flex; gap: 6px; flex-wrap: wrap; }
#fix-panel :is(.wallrow, .doorrow).edited { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
/* the rows that are a pick on the map (walls, doors, junctions, turn roads) and the changes: roadstyle has no part for a row with no input, so they
   have roadstyle's hover tint (--rs-hover-bg); the picked row has a stronger tint and an outline */
#fix-panel :is(.wallrow, .doorrow, .turn, .chg):hover, #fix-panel .wallrow.hover, #fix-panel .chg:focus-visible { background: var(--rs-hover-bg); }
#fix-panel :is(.wallrow, .doorrow, .turn).sel { background: color-mix(in srgb, var(--accent) 26%, var(--bg)); outline: 2px solid var(--accent); outline-offset: -1px; }
#fix-panel :is(.wallrow, .doorrow, .turn):focus-visible { outline: 2px solid var(--accent); }
#fix-panel .wallrow .rs-sel { width: 100%; max-width: none; }
#fix-panel .gwhy { grid-column: 1 / -1; margin: -2px 0 4px; }
/* the checks of a form (docs/design/fixes_editor_guards.md): the line under a field is roadstyle's rs-field-msg (red, amber with .warn, and the field has
   a red edge with aria-invalid); here only its place in the grid of a form */
#fix-panel .rs-field-msg { grid-column: 1 / -1; margin: -2px 0 4px; }
#fix-panel .warn { color: #b45309; }
#fix-panel .why.bad, #fix-panel #fix-state.bad { color: var(--fix-bad); }
#fix-panel .other .rs-field-msg { margin: 0; }
#fix-panel input:disabled { opacity: 0.55; cursor: not-allowed; }
#fix-panel .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }   /* the color of the item on the map */
#fix-panel .legend { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 11.5px; color: var(--mut); }
#fix-panel .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
#fix-panel .chgtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* the box over a form when the picked object is in the changes (fixes_panel.js, askBox): the form waits for Edit it or Delete it */
#fix-panel .fix-inchg { border: 1px solid #f59e0b; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: rgba(245, 158, 11, 0.1); }
#fix-panel .fix-inchg p { margin: 0 0 8px; }
#fix-panel .fix-inchg .row { margin-top: 0; }
#fix-panel #fix-edit.asking #fix-form, #fix-panel #fix-turns.asking #fix-turnsec, #fix-panel #fix-new.asking #fix-drawbox > :not(#fix-new-inchg) { display: none; }
#fix-panel .nrules { margin-left: 6px; padding: 0 6px; border-radius: 99px; background: rgba(245, 158, 11, 0.2); color: #b45309; font-size: 11px; font-weight: 600; white-space: nowrap; }
#fix-panel .chgtop .muted { font-weight: 400; }      /* the kind and the id after the name of a change */
#fix-panel .chgtime { margin-top: 2px; }                /* the time of a change (docs/design/fixes_editor_time_merge.md) */