/* Design tokens. Neutral grays only, no color tint near the preview. */
:root[data-theme="dark"] {
  --ui-bg: #1e1e1e;
  --ui-panel: #262626;
  --ui-panel-2: #2e2e2e;
  --ui-line: #3a3a3a;
  --ui-text: #d6d6d6;
  --ui-text-dim: #8a8a8a;
  --ui-field: #161616;
  --ui-accent: #e04040;
  --ui-error: #e04040;
  --ui-surround: #2a2a2a;
  --ui-shade: rgba(0, 0, 0, .35);
  --ui-focus: #3d7fd9;
  --ui-hover: #383838;
  --ui-pressed: #1a1a1a;

  /* Colors of single elements. */
  --ui-button-primary-border: #8a8a8a;
  --ui-button-selected: #d6d6d6;
  --ui-button-selected-text: #1e1e1e;
  --ui-checkbox-border: #8a8a8a;
  --ui-checkbox-border-hover: #d6d6d6;
  --ui-checkbox-checked: #d6d6d6;
  --ui-checkbox-mark: #161616;
  --ui-slider-knob: #d6d6d6;
  --ui-slider-tick: #8a8a8a;
  --ui-slider-default: #8a8a8a;
  --ui-image-compare-knob: #d6d6d6;
  --ui-image-compare-mode-hover: #383838;
  --ui-image-compare-mode-active: #3a3a3a;
  --ui-curve-histogram-input: #8a8a8a59;
  --ui-curve-histogram-output: #e6e6e68c;
  --ui-modal-backdrop: rgba(63, 62, 62, .5);
  --profiles-dock-docked: #f0f0f0;
  --profiles-dock-undocked: #8a8a8a;
  --custom-curve-histogram-mode-hover: #383838;
  --custom-curve-histogram-mode-active: #3a3a3a;
  --ui-image-list-hover: #2e2e2e;
  --ui-image-list-selected: #2e2e2e;
  --ui-image-list-selected-border: #d6d6d66f;
  --ui-image-list-placeholder: #161616;
  --ui-image-list-arrow: #d6d6d699;
  --ui-image-list-arrow-fade: #1e1e1ecc;
  --ui-tree-list-selected: #3a3a3a;
  --ui-points-number: #3a3a3a;
  --ui-points-number-selected-text: #fff;
  --ui-sidebar-bar: #222;
  --ui-sidebar-bar-border: #3a3a3a;
  --ui-sidebar-tab: #8a8a8a;
  --ui-sidebar-tab-hover: #383838;
  --ui-sidebar-tab-active: #d6d6d6;
  --ui-sidebar-tab-active-background: #3a3a3a;
  --ui-sidebar-split: #262626;
  --ui-sidebar-split-active: #3a3a3a;
  --ui-sidebar-split-grip: #8a8a8a;
  --ui-panel-header: #2e2e2e;
  --ui-panel-header-border: #3a3a3a;
  --ui-panel-header-text: #d6d6d6;
  --ui-panel-header-arrow: #8a8a8a;
}

:root[data-theme="light"] {
  --ui-bg: #b8b8b8;
  --ui-panel: #c8c8c8;
  --ui-panel-2: #d2d2d2;
  --ui-line: #a4a4a4;
  --ui-text: #1e1e1e;
  --ui-text-dim: #555;
  --ui-field: #ececec;
  --ui-accent: #c02020;
  --ui-error: #c02020;
  --ui-surround: #8f8f8f;
  --ui-shade: rgba(255, 255, 255, .35);
  --ui-focus: #2a66c0;
  --ui-hover: #dcdcdc;
  --ui-pressed: #b0b0b0;

  /* Colors of single elements. */
  --ui-button-primary-border: #555;
  --ui-button-selected: #1e1e1e;
  --ui-button-selected-text: #b8b8b8;
  --ui-checkbox-border: #555;
  --ui-checkbox-border-hover: #1e1e1e;
  --ui-checkbox-checked: #1e1e1e;
  --ui-checkbox-mark: #ececec;
  --ui-slider-knob: #1e1e1e;
  --ui-slider-tick: #555;
  --ui-slider-default: #555;
  --ui-image-compare-knob: #1e1e1e;
  --ui-image-compare-mode-hover: #dcdcdc;
  --ui-image-compare-mode-active: #a4a4a4;
  --ui-curve-histogram-input: #55555533;
  --ui-curve-histogram-output: #00000073;
  --ui-modal-backdrop: rgba(0, 0, 0, .5);
  --profiles-dock-docked: #000;
  --profiles-dock-undocked: #6a6a6a;
  --custom-curve-histogram-mode-hover: #dcdcdc;
  --custom-curve-histogram-mode-active: #a4a4a4;
  --ui-image-list-hover: #d2d2d2;
  --ui-image-list-selected: #d2d2d2;
  --ui-image-list-selected-border: #0000006f;
  --ui-image-list-placeholder: #ececec;
  --ui-image-list-arrow: #00000099;
  --ui-image-list-arrow-fade: #b8b8b8cc;
  --ui-tree-list-selected: #a4a4a4;
  --ui-points-number: #a4a4a4;
  --ui-points-number-selected-text: #fff;
  --ui-sidebar-bar: #c0c0c0;
  --ui-sidebar-bar-border: #a4a4a4;
  --ui-sidebar-tab: #555;
  --ui-sidebar-tab-hover: #dcdcdc;
  --ui-sidebar-tab-active: #1e1e1e;
  --ui-sidebar-tab-active-background: #a4a4a4;
  --ui-sidebar-split: #c8c8c8;
  --ui-sidebar-split-active: #a4a4a4;
  --ui-sidebar-split-grip: #555;
  --ui-panel-header: #d2d2d2;
  --ui-panel-header-border: #a4a4a4;
  --ui-panel-header-text: #1e1e1e;
  --ui-panel-header-arrow: #555;
}

:root {
  --profiles-width: 240px;
  --profiles-bar-width: 32px;
  --settings-width: 300px;
  --topbar-height: 44px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ui-text);
  background: var(--ui-bg);
  font: 12px/1.4 system-ui, sans-serif;
}

input,
select,
textarea,
button {
  font: inherit;
  color: var(--ui-text);
}

select,
textarea,
input[type="text"] {
  background: var(--ui-field);
  border: 1px solid var(--ui-line);
}

/* Focus: one style for all controls instead of the OS focus ring. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 1px solid var(--ui-focus);
  outline-offset: 1px;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 1px var(--ui-focus);
  outline: none;
}

/* Buttons: normal, hover, pressed, focused, selected, disabled. */
.btn {
  padding: 4px 10px;
  color: var(--ui-text);
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  cursor: pointer;
}

.btn.is-primary {
  font-weight: 600;
  border-color: var(--ui-button-primary-border);
}

.btn:hover:not(:disabled) {
  background: var(--ui-hover);
}

.btn:active:not(:disabled) {
  background: var(--ui-pressed);
}

.btn:focus-visible {
  outline: none;
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 1px var(--ui-focus);
}

.btn.is-selected,
.btn[aria-pressed="true"] {
  color: var(--ui-button-selected-text);
  background: var(--ui-button-selected);
  border-color: var(--ui-button-selected);
}

.btn:disabled {
  opacity: .45;
  cursor: default;
}

/* Button with an SVG icon: size and padding in px. */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* Checkbox: the native box is hidden (appearance: none), the box and the check mark are CSS. */
input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 13px;
  height: 13px;
  margin: 0 4px 0 0;
  vertical-align: -2px;
  background: var(--ui-field);
  border: 1px solid var(--ui-checkbox-border);
  border-radius: 2px;
  cursor: pointer;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--ui-checkbox-border-hover);
}

input[type="checkbox"]:checked {
  background: var(--ui-checkbox-checked);
  border-color: var(--ui-checkbox-checked);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 3px;
  height: 7px;
  border: solid var(--ui-checkbox-mark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--ui-focus);
  outline-offset: 1px;
}

input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: default;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-height);
  padding: 0 12px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-line);
}

.topbar__title {
  font-weight: 600;
}

.topbar__spacer {
  flex: 1;
}

/* Main layout */
.app {
  position: relative;
  display: flex;
  height: calc(100vh - var(--topbar-height));
}

/* Left panel: docked takes a column, undocked lies over the work area. */
.profiles {
  flex: none;
  display: flex;
  width: var(--profiles-width);
  overflow: hidden;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-line);
  transition: margin-left .15s;
}

/* Bar of the panel icons on the left edge. */
.profiles__bar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: var(--profiles-bar-width);
  padding: 4px 3px;
  background: var(--ui-sidebar-bar);
  border-right: 1px solid var(--ui-sidebar-bar-border);
}

.profiles__bar[hidden] {
  display: none;
}

.profiles__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0;
  color: var(--ui-sidebar-tab);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.profiles__tab:hover {
  background: var(--ui-sidebar-tab-hover);
}

.profiles__tab[aria-pressed="true"] {
  color: var(--ui-sidebar-tab-active);
  background: var(--ui-sidebar-tab-active-background);
}

.profiles__tab:focus {
  outline: none;
}

.profiles__tab:focus-visible {
  outline: 1px solid var(--ui-focus);
}

/* The panels of the left panel: presets above, photos below. */
.profiles__panels {
  flex: 1;
  min-width: 0;
  --ui-split-panels-handle: var(--ui-sidebar-split);
  --ui-split-panels-handle-active: var(--ui-sidebar-split-active);
  --ui-split-panels-grip: var(--ui-sidebar-split-grip);
}

.profiles__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* A collapsed panel shows only its header. */
.profiles__panel.is-collapsed .profiles__list {
  display: none;
}

.profiles__list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.app:not(.is-docked) .profiles {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  box-shadow: 4px 0 12px rgba(0, 0, 0, .4);
}

.app.is-collapsed .profiles {
  margin-left: calc(-1 * var(--profiles-width));
  box-shadow: none;
}

.profiles__filter {
  width: 110px;
  padding: 1px 3px;
}

/*
 * Dock in the Presets header: only the icon, no background or border in any state. Docked is bright, undocked is
 * gray, the mouse moves the tone a little toward the other state.
 */
.profiles__dock {
  display: flex;
  padding: 3px;
  color: var(--profiles-dock-undocked);
  background: none;
  border: 0;
  cursor: pointer;
}

.profiles__dock[aria-pressed="true"] {
  color: var(--profiles-dock-docked);
}

.profiles__dock:hover {
  color: color-mix(in srgb, var(--profiles-dock-undocked) 55%, var(--profiles-dock-docked));
}

.profiles__dock[aria-pressed="true"]:hover {
  color: color-mix(in srgb, var(--profiles-dock-docked) 75%, var(--profiles-dock-undocked));
}

.profiles__dock:focus-visible {
  outline: 1px solid var(--ui-focus);
  outline-offset: -1px;
}

.profiles__dock .icon {
  width: 14px;
  height: 14px;
}

/* The stripe of the panel is filled while the panel is docked. */
.profiles__dock[aria-pressed="false"] .profiles__dock-fill {
  display: none;
}

.work {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  overflow: auto;
}

/*
 * Preview images: at the bottom of the work area, as wide as the preview. In the HTML they come first, so Tab goes
 * from the photo tree to them.
 */
.work__images {
  order: 1;
  flex: none;
  width: 600px;
  margin-top: auto;
}

.settings {
  flex: none;
  width: var(--settings-width);
  padding: 10px;
  overflow: auto;
  background: var(--ui-panel);
  border-left: 1px solid var(--ui-line);
}

/* Download form inside the modal */
.download-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
}

.download-form input,
.download-form textarea {
  padding: 3px 6px;
}

.download-form label[for="downloadComment"] {
  align-self: start;
  padding-top: 4px;
}

.download-form textarea {
  width: 100%;
  min-width: 260px;
  resize: vertical;
}

.download-form__hint[data-hint="comment"] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Hint under a field: in the second column, close to the field. */
.download-form__hint {
  grid-column: 2;
  margin-top: -5px;
  font-size: 11px;
  color: var(--ui-text-dim);
}

.download-form__hint.is-error {
  color: var(--ui-error);
}

.download-form__hint[hidden] {
  display: none;
}

.download-form__file {
  grid-column: 1 / 3;
  min-height: 1.3em;
  color: var(--ui-text-dim);
}

.app-error {
  margin: 12px;
  padding: 8px 10px;
  color: var(--ui-text);
  background: var(--ui-panel-2);
  border-left: 3px solid var(--ui-accent);
}