/*
 * The studio's own styles.
 *
 * Everything is prefixed `ul-` and every rule is scoped under `.ul`, because on
 * getillustrations.com this markup is dropped into a page that already has a
 * stylesheet with opinions (Vectorizer Lab learned this the hard way: a global
 * `h1 { … !important }` in site.css beats anything a tool sets). Nothing here
 * styles a bare element selector outside `.ul`.
 *
 * Layout is an application, not a document: the studio is exactly one screen
 * tall, the stage fills it and never moves, and the rail is the only thing that
 * scrolls (owner ruling 2026-09-20 - the picture is what is being judged, and it
 * must not leave the screen while the settings are read). Below 900px it stacks
 * and the page scrolls, because a fixed stage on a phone would hide the settings.
 */

.ul {
  /* The Pixel Lab / Vectorizer Lab studio palette: near-black surfaces,
     hairlines, white ink, lime as the only accent with dark ink on it. */
  --ink: #f3f3f4;
  --ink-2: #8b8b91;
  --line: #202024;
  --bg: #050506;
  --card: #0b0b0d;
  --panel: #09090b;
  --field: #080809;
  --accent: #ccea4a;
  --accent-ink: #0b0b0e;
  --danger: #ff6b6b;
  --lime: #ccea4a;
  --radius: 11px;
  --rail: 336px;
  --side: 300px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* One screen, exactly. dvh so a phone's collapsing address bar does not leave
     a strip under the stage; vh is the fallback. */
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font: 14px/1.5 "Bricolage Grotesque", "Bricolage Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
.ul *,
.ul *::before,
.ul *::after { box-sizing: inherit; }
.ul img,
.ul canvas { max-width: 100%; }

/* `hidden` has to win. Several blocks below set `display` by class, and a class
   rule outranks the browser's own `[hidden] { display: none }` — so the drop
   zone, the studio grid and the result bar were all showing AT ONCE, stacked,
   however their `hidden` attribute was set. This is what the owner saw as "the UI
   is not organised": both the empty state and the studio, one above the other. */
.ul [hidden] { display: none !important; }

.ul-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- bar ---------- */

.ul-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 10px clamp(16px, 3vw, 28px);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: rgba(4, 4, 5, .94);
}
.ul-bar__name strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.ul-bar__sub {
  display: block;
  color: var(--ink-2);
  font-size: 12.5px;
}
.ul-bar__right { display: flex; align-items: center; gap: 8px; }
.ul-chip {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.ul-chip--live { border-color: rgba(204, 234, 74, .5); color: var(--accent); }

/* ---------- drop zone ---------- */

.ul-drop {
  /* Lives inside the stage now, where the picture will be, so the first
     screen and the working screen are the same layout. */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 64px) 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.ul-drop.is-over .ul-drop__inner {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #0f0f12);
}
.ul-drop__inner {
  width: min(520px, 100%);
  padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 36px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0f0f12;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.ul-drop__icon { width: 56px; height: 56px; color: var(--ink-2); }
.ul-drop__h { margin: 14px 0 2px; font-size: clamp(18px, 3vw, 22px); font-weight: 800; letter-spacing: -0.02em; }
.ul-drop__p { margin: 0 0 16px; color: var(--ink-2); }
.ul-drop__pick { cursor: pointer; }
.ul-note {
  max-width: 44ch;
  margin: 20px auto 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- buttons, fields ---------- */

.ul-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #4c4c54;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ul-btn:hover { border-color: #6b6b74; background: rgba(255, 255, 255, .04); }
.ul-btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(204, 234, 74, .45); }
.ul-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ul-btn--primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.ul-btn--primary:hover { filter: brightness(1.05); background: var(--accent); }
.ul-btn--danger { border-color: var(--danger); color: var(--danger); }
.ul-btn--ghost { background: transparent; border-color: var(--line); }
.ul-btn--lg { width: 100%; min-height: 44px; font-size: 14px; }
.ul-btn--sm { min-height: 32px; padding: 0 10px; font-size: 12px; }

.ul-field { margin-bottom: 18px; }
.ul-field__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ul-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.ul-auto {
  margin-bottom: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ul-select {
  width: 100%;
  min-height: 35px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: #d9d9dd;
  font: inherit;
  font-size: 12.5px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
.ul-select--sm { width: auto; min-height: 32px; }
.ul-why { margin: 7px 0 0; color: #737379; font-size: 11.5px; }

.ul-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
}
.ul-seg__b {
  flex: 1;
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.ul-seg__b:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.ul-seg__b.is-on { background: rgba(255, 255, 255, .16); color: #ececee; }
.ul-seg__b:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(204, 234, 74, .45); }
.ul-seg--sm .ul-seg__b { min-height: 28px; font-size: 11.5px; }

.ul-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 14px;
  cursor: pointer;
}
.ul-check { font-size: 13px; }
.ul-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.ul-check__note { display: block; color: #737379; font-size: 11.5px; font-style: normal; }

/* ---------- layout ---------- */

.ul-main {
  flex: 1;
  /* min-height 0 is what lets a flex child be SHORTER than its content, so the
     rail can scroll inside it instead of stretching the page. */
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--side);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(14px, 2.4vw, 24px);
  padding-bottom: calc(clamp(14px, 2.4vw, 24px) + env(safe-area-inset-bottom, 0px));
}
.ul-rail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  scrollbar-width: thin;
  scrollbar-color: #2a2a2f transparent;
}
.ul-side { scrollbar-color: #2a2a2f transparent; }
/* Groups of controls read as sections, the way Pixel Lab groups its modules. */
.ul-rail .ul-field,
.ul-rail .ul-check,
.ul-rail .ul-diag,
.ul-rail .ul-file,
.ul-rail .ul-presets {
  margin: 0 0 7px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.ul-rail .ul-file { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ul-rail .ul-diag { background: color-mix(in srgb, var(--lime) 9%, var(--card)); }
.ul-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ul-rail .ul-queue { margin-top: 18px; }

/* The right column: everything that is about the RESULT, ending with the card. */
.ul-side {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ul-side .ul-ad { margin-top: auto; }
.ul-finish {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.ul-finish__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ul-finish .ul-field { margin-bottom: 14px; }
.ul-finish .ul-field:last-child { margin-bottom: 0; }
.ul-range { display: flex; align-items: center; justify-content: space-between; }
.ul-range__v { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ul-finish input[type="range"] { width: 100%; accent-color: var(--accent); }
.ul-finish .ul-strength { display: block; }
.ul-finish .ul-strength__k { display: none; }
.ul-finish .ul-strength input { width: calc(100% - 5ch); vertical-align: middle; }
.ul-finish .ul-strength__v { display: inline-block; vertical-align: middle; margin-left: 6px; }

.ul-file {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ul-file__thumb {
  flex: none;
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
}
.ul-file__meta { min-width: 0; flex: 1; }
.ul-file__name {
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul-file__dims { margin: 2px 0 0; color: var(--ink-2); font-size: 12.5px; }

.ul-run { margin-top: 22px; }
.ul-frame__row { display: flex; gap: 6px; margin: 4px 0 8px; }
.ul-frame__row .ul-btn { flex: 1; }
.ul-frame__status { color: var(--accent); font-size: 11.5px; }
.ul-frame__angle { margin-top: 4px; }
.ul-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--ink-2); font-size: 12.5px; }
.ul-target input { width: 7ch; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }
.ul-history { max-width: 220px; }
.ul-progress { margin-top: 12px; }
.ul-progress__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.ul-progress__bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .18s linear;
}
.ul-progress__label { margin: 7px 0 0; color: var(--ink-2); font-size: 12.5px; }

.ul-swatch {
  width: 34px; height: 26px;
  margin-bottom: 7px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}

/* ---------- what we found ---------- */

.ul-diag {
  margin-bottom: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--lime) 9%, var(--card));
}
.ul-diag__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ul-diag__h {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: #d6d6da;
}
.ul-diag__list { margin: 8px 0 0; padding: 0; list-style: none; }
.ul-diag__list li { display: flex; gap: 8px; padding: 5px 0; font-size: 12.5px; line-height: 1.45; }
.ul-diag__dot {
  flex: none;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ink-2);
}
.ul-diag__dot--high { background: var(--accent); }
.ul-diag__what { font-weight: 600; }
.ul-diag__why { color: var(--ink-2); }
.ul-diag__plan {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-2);
  font-size: 12.5px;
}

/* ---------- stage ---------- */

.ul-stage__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ul-stage__hint { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.ul-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ul-strength { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.ul-strength input { width: 120px; accent-color: var(--accent); }
.ul-strength__k { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.ul-strength__v { min-width: 4ch; font-variant-numeric: tabular-nums; color: var(--ink); }

.ul-compare {
  position: relative;
  background-color: #050505;
  /* Takes every pixel the stage has left after the zoom row, the slider and
     the result bar. Not a minimum: the canvas is absolute and paints to fit, so
     nothing inside has any business deciding how tall this is - and min-height
     0 so it can shrink to fit the screen rather than the other way round. */
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    repeating-conic-gradient(rgba(255, 255, 255, .05) 0% 25%, transparent 0% 50%)
    50% / 18px 18px,
    #050505;
  overflow: hidden;
  touch-action: none;
}
/* Absolutely positioned, so the canvas can never change the size of the box it
   is measuring. It used to sit in flow inside a 1px-bordered host and be sized
   from getBoundingClientRect(), which includes that border: every draw made the
   canvas 2px taller than the content box, the host grew to fit, the
   ResizeObserver fired, and the panel grew 2px per tick until it was 4,915px
   tall. That is the "image keeps scrolling down". */
.ul-compare__canvas { position: absolute; inset: 0; display: block; cursor: ew-resize; }
.ul-compare__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  pointer-events: none;
}
.ul-compare__tag {
  position: absolute;
  top: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(5, 5, 6, .78);
  color: #ececee;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.ul-compare.is-live .ul-compare__tag { opacity: 1; }
.ul-compare__tag--l { left: 10px; }
.ul-compare__tag--r { right: 10px; }

.ul-slider { display: block; }
.ul-slider input {
  width: 100%;
  accent-color: var(--accent);
}

.ul-out {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.ul-out__facts { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; }
.ul-fact { min-width: 0; }
.ul-fact__k {
  display: block;
  color: #737379;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ul-fact__v { font-size: 13px; font-weight: 600; }
.ul-out__actions { display: flex; gap: 8px; align-items: center; }
.ul-out__actions .ul-btn { flex: 1; }

.ul-error {
  margin: 0 clamp(14px, 2.4vw, 24px) clamp(14px, 2.4vw, 24px);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
  color: var(--danger);
  font-size: 13.5px;
}

/* ---------- presets, queue, evidence ---------- */

.ul-presets { margin-bottom: 16px; }
.ul-presets__controls { display: flex; gap: 8px; }
.ul-presets__controls .ul-select { flex: 1; min-width: 0; }

.ul-queue, .ul-evidence {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.ul-queue__head, .ul-evidence__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ul-queue__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ul-check--inline { margin: 10px 0 4px; padding: 0 !important; border: 0 !important; background: transparent !important; }
.ul-queue__list { margin: 10px 0 0; padding: 0; list-style: none; }
.ul-queue__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.ul-queue__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-queue__state { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.ul-queue__state--done { color: #0a7d2b; }
.ul-queue__state--failed { color: var(--danger); }

.ul-evidence__headline { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.ul-evidence__list { margin: 8px 0 0; padding: 0; list-style: none; }
.ul-evidence__list li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.ul-evidence__value { color: var(--ink-2); }
.ul-evidence__caveat { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12.5px; }
.ul-evidence__print { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- the GetIllustrations card ---------- */

.ul-ad {
  position: relative;
  width: auto;
  padding: 12px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: 12.5px;
  line-height: 1.4;
}
.ul-ad__link { display: block; color: inherit; text-decoration: none; }
.ul-ad__link:hover .ul-ad__h { text-decoration: underline; }
.ul-ad__eyebrow {
  display: block;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ul-ad__h { display: block; margin: 2px 0 2px; font-size: 14px; letter-spacing: -0.01em; }
.ul-ad__p { display: block; color: var(--ink-2); }
.ul-ad__close {
  position: absolute;
  top: 4px; right: 6px;
  width: 24px; height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font: 16px/1 system-ui, sans-serif;
  cursor: pointer;
}
.ul-ad__close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
@media (max-width: 1200px) {
  /* Two columns: the result column drops under the stage. */
  .ul-main { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ul-rail { grid-row: 1 / 3; }
  .ul-side { grid-column: 2; overflow: visible; }
  .ul { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .ul-rail { overflow: visible; }
  .ul-compare { flex: none; height: 60vh; }
}

/* ---------- storage dialog ---------- */

.ul-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
.ul-dialog::backdrop { background: rgba(10, 12, 16, .5); }
.ul-dialog__h { margin: 0 0 6px; font-size: 18px; }
.ul-dialog__p { margin: 0 0 14px; color: var(--ink-2); font-size: 13.5px; }
.ul-dialog__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.ul-models { margin: 0; padding: 0; list-style: none; }
.ul-models li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.ul-models__size { color: var(--ink-2); font-size: 12.5px; }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  /* A document again: the page scrolls, the rail does not. */
  .ul { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .ul-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ul-rail { grid-row: auto; overflow: visible; }
  .ul-side { grid-column: auto; }
  /* The picture comes first on a phone: the settings are what you scroll to,
     not what you stare at. */
  .ul-stage { order: -1; }
  .ul-compare { flex: none; height: 46vh; }
  /* Touch targets. The compact desktop sizes (38px, and 32px for the zoom row)
     are under the 44px a finger needs - gate G10. */
  .ul-seg__b,
  .ul-seg--sm .ul-seg__b,
  .ul-btn--sm,
  .ul-select--sm { min-height: 44px; }
}

/* A mouse can hit 32px; a finger cannot. This catches a touch laptop and a
   tablet in landscape, which the width query alone would miss. */
@media (pointer: coarse) {
  .ul-seg__b,
  .ul-seg--sm .ul-seg__b,
  .ul-btn--sm,
  .ul-select--sm { min-height: 44px; }
}

@media (max-width: 480px) {
  .ul-bar { flex-wrap: wrap; }
  .ul-seg { flex-wrap: wrap; }
  .ul-seg__b { flex: 1 1 40%; }
  .ul-out { flex-direction: column; align-items: stretch; }
  .ul-out__actions { justify-content: stretch; }
  .ul-out__actions .ul-btn { flex: 1; }
}