/* =====================================================================
   Board Designer -- responsive rebuild
   ---------------------------------------------------------------------
   The Designer previously rendered as a desktop two-pane split that was
   simply squeezed at narrow widths: a 340px+ control column beside the
   preview, a preview frame sized in absolute pixels from the default
   zoom, `100vh` heights, no safe-area handling, and Revert hidden
   outright below 650px.

   This file keeps the existing markup, ids, data-attributes and state
   logic exactly as they are and restructures the same elements
   responsively:

     < 900px  full-screen workspace, one column, Edit/Preview modes,
              sticky compact header, bottom action bar
     >= 900px the split view, with the preview and a contextual control
              panel both always usable

   Both breakpoints drive the same controls and the same save/revert
   logic -- there is no separate mobile implementation to drift.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Fixes that apply at every width
   --------------------------------------------------------------- */

/* `place-items:center` inside a scroll container makes overflow
   unreachable: the child overflows equally on both sides and the
   start edge cannot be scrolled to. `safe` centering falls back to
   start alignment exactly when that would happen. */
.uss-designer-stage{
  place-items:safe center!important;
}

/* Last-resort guard: the preview frame can never be a source of
   page-level horizontal overflow, whatever inline size the zoom
   logic has set. Auto-fit (redesign-designer-mobile.js) should mean
   this never actually engages. */
.uss-designer-frame-wrap{
  max-width:100%;
}

/* Zoom and close controls were 34-38px -- below the 44px floor. */
.uss-designer-zoom button,
.uss-designer-zoom output{
  min-height:var(--uss2-tap);
  min-width:var(--uss2-tap);
}
.uss-designer-close{
  width:var(--uss2-tap)!important;
  height:var(--uss2-tap)!important;
}

/* The mode bar and action bar are narrow-width surfaces only. */
.uss-designer-modebar,
.uss-designer-actionbar{display:none;}

/* Revert is genuinely disabled when there is nothing to revert, rather
   than being a focusable control that looks disabled and then silently
   does nothing. The reason is carried on the element's title, and the
   save-state element alongside it states the situation in words. */
#ussDesignerRevert:disabled,
#ussDesignerRevertMobile:disabled{opacity:.42;cursor:not-allowed;}

/* Persistence status. Driven by the application's own #saveStatus signal
   (which autosaveWorkspace drives as it writes to storage), never inferred
   from input events. Distinct from .uss-designer-save-state, which
   designer-apply-preview owns and uses to report whether the design has
   been applied to Permanent OBS. */
.uss-designer-persist{
  display:flex;align-items:center;gap:7px;
  margin:0;
  font-size:.76rem;font-weight:700;
  color:var(--uss2-faint);
}
.uss-designer-persist-dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:0 0 auto;
}
.uss-designer-persist[data-state="pending"]{color:#ffe1a3;}
.uss-designer-persist[data-state="ready"]{color:#8ff0bb;}
.uss-designer-persist[data-state="error"]{
  color:#ffb3bd;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Save state reflects the real persistence lifecycle, driven by the
   application's own #saveStatus signal -- never inferred from input
   events. */
.uss-designer-save-state{gap:7px;}
.uss-designer-save-state i{transition:background var(--uss2-ease);}
.uss-designer-save-state[data-state="idle"]{color:var(--uss2-faint)!important;}
.uss-designer-save-state[data-state="idle"] i{background:var(--uss2-faint)!important;box-shadow:none!important;}
.uss-designer-save-state[data-state="pending"]{color:#ffe1a3!important;}
.uss-designer-save-state[data-state="pending"] i{background:var(--uss2-warning)!important;box-shadow:none!important;}
.uss-designer-save-state[data-state="ready"]{color:#8ff0bb!important;}
.uss-designer-save-state[data-state="ready"] i{background:var(--uss2-success)!important;}
.uss-designer-save-state[data-state="error"]{
  color:#ffb3bd!important;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.uss-designer-save-state[data-state="error"] i{background:var(--uss2-danger)!important;box-shadow:none!important;}

/* ---------------------------------------------------------------
   2. Narrow widths: full-screen workspace
   --------------------------------------------------------------- */
@media(max-width:899px){

  .uss-designer-overlay{
    display:block!important;
    padding:0!important;
    background:var(--uss2-navy-950)!important;
    backdrop-filter:none!important;
  }

  .uss-designer-shell{
    display:grid!important;
    /* header | mode switch | body | action bar */
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    width:100%!important;
    max-width:none!important;
    /* dvh, not vh: mobile browser chrome must not push the action bar
       below the visible area. --uss-designer-vh is set from
       visualViewport while the on-screen keyboard is open, since iOS
       does not shrink the layout viewport for the keyboard. */
    height:var(--uss-designer-vh,100dvh)!important;
    max-height:var(--uss-designer-vh,100dvh)!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(180deg,var(--uss2-navy-900),var(--uss2-navy-950))!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  /* --- 2a. Compact sticky header -------------------------------
     The real runtime header is deeper than the static markup: studio-core-ui
     injects #urekaCoreDesignerLibrary (saved-board Load / Save New / OFF AIR)
     *inside* .uss-designer-heading, which pushed the header to 194px tall on
     a 390px screen.

     `display:contents` on both the heading and the actions wrapper promotes
     every real control into one flex row, so they can be ordered directly:
       [Close] [Board title] [save state]
       [saved-board library, full width]
     Nothing moves in the DOM, so every id, handler and QA selector is
     untouched. */
  .uss-designer-header{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:var(--uss2-space-2) var(--uss2-space-3)!important;
    padding:var(--uss2-space-2) var(--uss2-space-3)!important;
    padding-top:calc(var(--uss2-space-2) + env(safe-area-inset-top))!important;
    border-bottom:1px solid var(--uss2-line)!important;
    background:var(--uss2-navy-900)!important;
  }
  .uss-designer-header-actions,
  .uss-designer-heading{display:contents!important;}

  .uss-designer-close{order:1;flex:0 0 auto;}

  .uss-designer-heading .kicker,
  .uss-designer-heading p{display:none!important;}

  .uss-designer-heading h2{
    order:2;
    flex:1 1 auto;
    min-width:0;
    margin:0!important;
    overflow:hidden;
    font-size:1rem!important;
    font-weight:800;
    line-height:1.2!important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* The header's apply-state message and the action bar's persistence
     message read as two contradictory success claims on a phone
     ("Previewing unapplied changes" above, "Saved" below). The action bar
     carries one combined statement instead, so the header copy is hidden
     here rather than duplicated. */
  .uss-designer-save-state{display:none!important;}

  /* Saved-board controls get their own full-width row under the title
     rather than competing with it for horizontal space. */
  #urekaCoreDesignerLibrary{
    order:4;
    flex:1 0 100%;
    min-width:0;
  }
  #urekaCoreDesignerLibrary .btn,
  #urekaCoreDesignerLibrary select{
    min-height:var(--uss2-tap)!important;
    height:auto!important;
  }

  /* One primary Done only: the bottom action bar owns Done and Revert at
     these widths, so the header copies of both are hidden. */
  .uss-designer-header-actions #ussDesignerRevert,
  .uss-designer-header-actions #ussDesignerDone{display:none!important;}

  /* --- 2b. Edit / Preview mode switch -------------------------- */
  .uss-designer-modebar{
    display:flex!important;
    justify-content:center;
    padding:var(--uss2-space-3) var(--uss2-space-3) var(--uss2-space-2);
    border-bottom:1px solid var(--uss2-line);
    background:var(--uss2-navy-900);
  }
  .uss-designer-modebar .uss2-segmented{width:100%;max-width:340px;}
  .uss-designer-modebar .uss2-segmented__option{flex:1 1 0;min-width:0;}

  /* --- 2c. Single-column body ---------------------------------- */
  .uss-designer-body{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    min-height:0!important;
  }

  /* A 9:16 board needs nearly the full phone screen to be legible, so
     the two surfaces take turns rather than splitting the height. */
  .uss-designer-shell[data-mobile-mode="edit"] .uss-designer-preview{display:none!important;}
  .uss-designer-shell[data-mobile-mode="preview"] .uss-designer-controls{display:none!important;}

  /* --- 2d. Controls ------------------------------------------- */
  /* Four children -- intro, category tabs, context note, controls host --
     but only three rows were declared. The context note took the 1fr row and
     the scrolling host fell into an implicit auto row, so it grew to its
     content height instead of scrolling: the note collided with the first
     control, and the last section sat underneath the action bar. The host is
     now explicitly the one flexible, scrolling row. */
  .uss-designer-controls{
    display:grid!important;
    grid-template-rows:auto auto auto minmax(0,1fr)!important;
    min-height:0!important;
    border-right:0!important;
    border-bottom:0!important;
    background:transparent!important;
  }

  /* The note is content, not a floating layer: it must take the height its
     text needs and push what follows down. */
  .uss-designer-context-note{
    position:static!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0 var(--uss2-space-4) var(--uss2-space-3)!important;
    padding:var(--uss2-space-3)!important;
    line-height:1.45!important;
    overflow-wrap:anywhere;
  }

  /* The category name is already shown by the active tab; keep only
     the one-line guidance under it. */
  .uss-designer-controls-intro{
    display:block!important;
    padding:0 var(--uss2-space-4) var(--uss2-space-2)!important;
  }
  .uss-designer-controls-intro span,
  .uss-designer-controls-intro strong{display:none!important;}
  .uss-designer-controls-intro p{
    display:block!important;
    max-width:none!important;
    margin:0!important;
    color:var(--uss2-muted)!important;
    font-size:.8rem!important;
    line-height:1.45!important;
    text-align:left!important;
  }

  /* Category tabs: full-width scroller, 44px targets, labels never
     truncated. The active tab is scrolled into view by JS. */
  .uss-designer-tabs{
    gap:var(--uss2-space-2)!important;
    padding:0 var(--uss2-space-4) var(--uss2-space-3)!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .uss-designer-tabs::-webkit-scrollbar{display:none;}
  .uss-designer-tabs button{
    scroll-snap-align:start;
    min-height:var(--uss2-tap)!important;
    padding:0 var(--uss2-space-4)!important;
    border-radius:999px!important;
    font-size:.85rem!important;
    white-space:nowrap;
  }
  /* A category sliced at the viewport edge with no affordance reads as a
     layout bug rather than a scroller. A fade on each side shows the row
     continues, and the trailing padding lets the last category clear the
     edge instead of sitting flush against it. */
  .uss-designer-tabs{
    padding-right:var(--uss2-space-8)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);
  }
  .uss-designer-tabs button:last-child{margin-right:var(--uss2-space-4);}
  .uss-designer-tabs button.is-active{
    border-color:rgba(228,174,53,.42)!important;
    background:linear-gradient(90deg,rgba(228,174,53,.18),rgba(228,174,53,.06))!important;
    color:#f0dfac!important;
    box-shadow:none!important;
  }

  .uss-designer-controls-host{
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:0 var(--uss2-space-4) var(--uss2-space-8)!important;
    /* Clearance so the last section scrolls fully clear of the action bar
       rather than stopping underneath it. */
    scroll-padding-bottom:var(--uss2-space-8);
    overscroll-behavior:contain;
  }

  .uss-designer-context-note{
    margin:0 0 var(--uss2-space-3)!important;
  }

  /* Sections read as accordions, one readable column. */
  .uss-designer-controls-host .prop-section{
    margin:0 0 var(--uss2-space-3)!important;
    border-radius:var(--uss2-radius-sm)!important;
  }
  .uss-designer-controls-host .prop-section summary{
    min-height:var(--uss2-tap)!important;
    display:flex!important;
    align-items:center!important;
    padding:var(--uss2-space-2) var(--uss2-space-3)!important;
    font-size:.92rem!important;
  }
  .uss-designer-controls-host .prop-section .prop-body{
    padding:var(--uss2-space-2) var(--uss2-space-3) var(--uss2-space-3)!important;
  }

  /* Label above, full-width control below. */
  .uss-designer-controls-host .prop-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:var(--uss2-space-2)!important;
    min-height:0!important;
    padding:var(--uss2-space-3) 0!important;
  }
  .uss-designer-controls-host .prop-row>span{min-width:0;}
  .uss-designer-controls-host .prop-row strong{font-size:.88rem!important;}
  .uss-designer-controls-host .prop-row small{font-size:.76rem!important;line-height:1.4;}

  /* Rows whose control is a switch keep label-left / switch-right --
     stacking a toggle full-width reads as a broken control. */
  .uss-designer-controls-host .prop-row:has(.toggle-input),
  .uss-designer-controls-host .prop-row:has(input[type="checkbox"]){
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
  }

  /* Buttons inside the panel (logo upload/replace/default, reset colours)
     ship at 32px. The toggle switches are left alone deliberately: each is
     wrapped in a label.prop-row that is 60-80px tall, so the row itself is
     already the tap target and inflating the switch would only distort it. */
  .uss-designer-controls-host .btn,
  .uss-designer-controls-host .prop-body button{
    min-height:var(--uss2-tap)!important;
    height:auto!important;
    padding-block:8px!important;
  }

  /* 16px form text stops iOS Safari zooming the viewport on focus. */
  .uss-designer-controls-host .input,
  .uss-designer-controls-host .select,
  .uss-designer-controls-host .textarea,
  .uss-designer-controls-host input[type="text"],
  .uss-designer-controls-host input[type="number"],
  .uss-designer-controls-host input[type="url"]{
    width:100%!important;
    min-width:0!important;
    min-height:var(--uss2-tap)!important;
    font-size:16px!important;
  }
  /* `.uss-color-source` is the hidden native colour picker that app.css
     deliberately shrinks to 1px and positions absolutely; the visible
     control is the .uss-color-trigger button next to it. It must be
     excluded here -- sizing it as a normal field inflates it to the width
     of its positioned ancestor (the whole overlay) and pushes the panel
     off-screen. */
  .uss-designer-controls-host input[type="color"]:not(.uss-color-source){
    width:100%!important;
    min-height:var(--uss2-tap)!important;
  }
  .uss-designer-controls-host .uss-color-trigger{
    width:100%!important;
    min-height:var(--uss2-tap)!important;
  }
  /* The hidden source input also carries the generic `.input` class, so the
     field rule above matches it too. This restores app.css's intended 1px
     hidden size at a specificity that beats both. */
  .uss-designer-controls-host .color-input.uss-color-source{
    width:1px!important;
    min-width:1px!important;
    min-height:0!important;
    padding:0!important;
  }
  .uss-designer-controls-host input[type="range"]{
    width:100%!important;
    min-height:var(--uss2-tap)!important;
  }

  /* --- 2e. Preview -------------------------------------------- */
  .uss-designer-preview{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    min-height:0!important;
  }
  .uss-designer-preview-toolbar{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:var(--uss2-space-2)!important;
    padding:var(--uss2-space-3)!important;
  }
  .uss-designer-preview-tools{
    width:100%;
    justify-content:space-between!important;
    gap:var(--uss2-space-2)!important;
  }
  .uss-designer-state-control{flex:1 1 auto;min-width:0;}
  .uss-designer-state-control .select{
    width:100%!important;
    min-width:0!important;
    min-height:var(--uss2-tap)!important;
    font-size:16px!important;
  }
  .uss-designer-stage{padding:var(--uss2-space-3)!important;}

  .uss-designer-preview-footer{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:var(--uss2-space-2)!important;
    padding:var(--uss2-space-3)!important;
  }
  .uss-designer-preview-footer>div:last-child{
    display:grid!important;
    grid-template-columns:1fr;
    gap:var(--uss2-space-2);
  }

  /* #ussDesignerOpenPreview does two jobs: it is "Apply Changes" while the
     design is dirty and "Open Full Preview" once it is applied. The action
     bar already owns Apply, so showing this button gives the phone two Apply
     controls -- and its other mode opens the raw 1080x1920 OBS page, which
     collapses into unreadable vertical strips at phone width.

     It is hidden in both modes here. `display:none` also takes it out of the
     tab order and the accessibility tree, so there is exactly one Apply
     control on mobile and no Open Full Preview at all. Desktop keeps it. */
  #ussDesignerOpenPreview{display:none!important;}
  .uss-designer-preview-footer .btn{min-height:var(--uss2-tap)!important;}

  /* --- 2f. Bottom action bar ----------------------------------
     Always reachable, never overlapping the controls (it is a grid
     row, not a fixed overlay), and clear of the home indicator. */
  .uss-designer-actionbar{
    display:flex!important;
    flex-direction:column;
    gap:var(--uss2-space-2);
    padding:var(--uss2-space-3);
    padding-bottom:calc(var(--uss2-space-3) + env(safe-area-inset-bottom));
    border-top:1px solid var(--uss2-line);
    background:var(--uss2-navy-900);
  }
  /* Grid with minmax(0,1fr) rather than flex: the three buttons must be able
     to shrink below their intrinsic content width, otherwise their combined
     min-content size widens the whole workspace past the viewport (measured
     at 320px, where it forced the shell to 338px). */
  .uss-designer-actionbar-buttons{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--uss2-space-2);
    min-width:0;
  }
  .uss-designer-actionbar .uss2-btn{
    min-width:0;
    padding-inline:var(--uss2-space-2);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  /* Below ~360px three across stops being legible, so Revert takes its own
     row and the two commit actions share the one below it. */
  @media(max-width:359px){
    .uss-designer-actionbar-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}
    #ussDesignerRevertMobile{grid-column:1/-1;}
  }
}

/* Landscape phones are very short: drop the mode bar's extra padding
   and let the controls have every available pixel. */
@media(max-width:899px) and (max-height:480px){
  .uss-designer-modebar{padding-block:var(--uss2-space-2);}
  .uss-designer-controls-intro{display:none!important;}
  .uss-designer-heading .uss-designer-save-state{display:none!important;}
}

/* ---------------------------------------------------------------
   3. Split view
   Both panes stay genuinely usable: the control column never drops
   below a readable width, and the preview keeps its own space.
   --------------------------------------------------------------- */
@media(min-width:900px){
  .uss-designer-body{
    grid-template-columns:minmax(330px,400px) minmax(0,1fr)!important;
  }
  .uss-designer-tabs button{min-height:36px;}
  /* Keep save state and Revert visible in the header at these widths. */
  .uss-designer-save-state{display:inline-flex!important;}
}

@media(prefers-reduced-motion:reduce){
  .uss-designer-shell,.uss-designer-preview-frame{transition:none!important;}
}

/* ===================================================================
   Style Presets and Saved Styles
   Preset cards are a starting point the user picks from, so they read
   as pickable objects rather than a list row: a miniature of the
   preset's own tokens, its name, and what it is for. Selection and
   keyboard focus are drawn differently on purpose -- a ring for focus,
   a filled border plus check for selection -- because a card that is
   merely focused must not look chosen.
   =================================================================== */
.uss-layout-block{
  display:grid;
  gap:10px;
  margin:0 0 18px;
}
.uss-layout-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.uss-layout-head strong{font-size:.95rem}
.uss-customized-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--uss2-accent, #5b8def);
  background:rgba(91,141,239,.14);
  color:var(--uss2-accent, #5b8def);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.uss-layout-help,
.uss-saved-styles-help{
  margin:0;
  color:var(--uss2-muted, #a8b0bb);
  font-size:.84rem;
  line-height:1.45;
}

/* Two cards fit side by side from 320px up; a third would scroll rather
   than shrink below a usable size. */
.uss-layout-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  gap:10px;
}
.uss-layout-card{
  display:grid;
  gap:6px;
  justify-items:start;
  padding:10px;
  min-height:44px;
  border:1px solid var(--uss2-line, rgba(255,255,255,.12));
  border-radius:12px;
  background:var(--uss2-panel, #17191d);
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.uss-layout-card:focus-visible{
  outline:2px solid var(--uss2-accent, #5b8def);
  outline-offset:2px;
}
.uss-layout-card.is-active{
  border-color:var(--uss2-accent, #5b8def);
  box-shadow:inset 0 0 0 1px var(--uss2-accent, #5b8def);
}
.uss-layout-card.is-active .uss-layout-card-name::after{
  content:"\2713";
  margin-left:6px;
  color:var(--uss2-accent, #5b8def);
  font-weight:800;
}
.uss-layout-card-name{font-weight:700;font-size:.9rem}
.uss-layout-card-desc{
  color:var(--uss2-muted, #a8b0bb);
  font-size:.78rem;
  line-height:1.35;
}
/* The thumbnail draws the layout's composition -- where the header sits,
   whether there is a centre panel, how the items sit around it -- because
   structure is what actually differs between these six. */
.uss-layout-card-art{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  width:100%;
  padding:6px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.uss-layout-card-art i{
  display:block;
  height:10px;
  border-radius:2px;
  background:currentColor;
  opacity:.34;
}
.uss-layout-card-art i[data-cell="0"]{opacity:0}
.uss-layout-card-art i[data-cell="2"]{opacity:.85;height:12px}
.uss-layout-card-art i[data-cell="3"]{opacity:.62;height:6px}
.uss-layout-card-art i[data-cell="4"]{opacity:.5;height:5px}
.uss-layout-card.is-active .uss-layout-card-art{background:rgba(91,141,239,.14)}
.uss-layout-actions{display:flex;gap:8px;flex-wrap:wrap}

/* The Style Preset select stays for the app's own sync pipeline but is
   no longer the control anyone uses. */
.prop-row.uss-row-superseded{display:none!important}

.uss-saved-styles{
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--uss2-line, rgba(255,255,255,.12));
}
.uss-saved-styles-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.uss-saved-styles-head strong{font-size:.95rem}
.uss-saved-styles-list{display:grid;gap:8px}
.uss-saved-styles-empty{
  margin:0;
  color:var(--uss2-muted, #a8b0bb);
  font-size:.84rem;
  line-height:1.45;
}
.uss-saved-style{
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid var(--uss2-line, rgba(255,255,255,.12));
  border-radius:12px;
  background:var(--uss2-panel, #17191d);
}
.uss-saved-style-name{font-size:.9rem}
.uss-saved-style-meta{color:var(--uss2-muted, #a8b0bb);font-size:.78rem}
.uss-saved-style-note{
  margin:0;
  color:var(--uss2-muted, #a8b0bb);
  font-size:.76rem;
  line-height:1.4;
}
.uss-saved-style-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.uss-saved-style-actions .uss2-btn{
  min-height:38px;
  padding:0 12px;
  font-size:.8rem;
}

@media(max-width:899px){
  /* Touch targets stay at 44px on a phone, and the action row wraps
     rather than pushing the card wider than the panel. */
  .uss-saved-style-actions .uss2-btn{min-height:44px;flex:1 1 auto}
  .uss-layout-card{padding:12px}
  
  .uss-saved-styles-head .uss2-btn{width:100%}
}

@media(max-width:360px){
  /* Below 360px two cards would be narrower than their content, so the
     row scrolls instead of clipping. */
  .uss-layout-cards{
    grid-auto-flow:column;
    grid-auto-columns:minmax(150px,1fr);
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .uss-layout-card{scroll-snap-align:start}
}

/* A failed Saved Styles write is announced rather than swallowed: the list
   is left as it is so the action can be retried. */
.uss-saved-styles-error{
  margin:0;
  padding:9px 11px;
  border:1px solid var(--uss2-danger, #e5484d);
  border-radius:10px;
  background:rgba(229,72,77,.1);
  color:var(--uss2-danger, #e5484d);
  font-size:.8rem;
  line-height:1.45;
}

/* Six cards wrap to two rows on most widths. Reserving two lines for the
   name keeps the rows aligned whether a name wraps or not. */
.uss-layout-card-name{min-height:2.4em;display:block}