/* LarSheen shared renderer — Packet 11 */
.ls-rendered-element { box-sizing: border-box; }
.ls-rendered-element[data-larsheen-rendered-custom="true"] { min-width: 0; min-height: 0; }
.ls-custom-element { box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.ls-custom-element figure { margin: 0; }
.ls-custom-element img { display: block; max-width: 100%; max-height: 100%; }
.ls-custom-image img,
.ls-custom-decoration img { width: 100%; height: 100%; object-fit: contain; }
.ls-custom-link-button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.ls-custom-repeater { overflow: visible; }
.ls-repeater-rows { display:grid; width:max-content; min-width:100%; align-items:stretch; box-sizing:border-box; }
.ls-repeater-row { display:grid; min-width:100%; box-sizing:border-box; }
.ls-repeater-cell { box-sizing:border-box; min-width:0; min-height:0; display:flex; overflow:hidden; }
.ls-repeater-header .ls-repeater-cell { overflow-wrap:anywhere; }
.ls-repeater-cell img { width: 100%; height: 100%; object-fit: contain; }
.ls-repeater-cell a { max-width: 100%; box-sizing: border-box; text-align: center; }
.ls-repeater-text,
.ls-repeater-rich-text { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.ls-repeater-rich-text > :first-child,
.ls-custom-text-content > :first-child { margin-top: 0; }
.ls-repeater-rich-text > :last-child,
.ls-custom-text-content > :last-child { margin-bottom: 0; }

.ls-render-overlay-root { position: absolute; inset: 0; z-index: 2147483000; pointer-events: none; contain: layout style paint; }
[data-layout-canvas] { position: relative; }

.ls-canonical-stage { position: relative; display: grid; grid-template-columns: var(--ls-left-float-width) var(--ls-frame-width) var(--ls-right-float-width); column-gap: var(--ls-stage-gap); box-sizing: border-box; padding: var(--ls-stage-padding); margin: 0 auto; align-items: start; }
.ls-canonical-frame { position: relative; box-sizing: border-box; min-width: 0; }
.ls-canonical-area { position: relative; box-sizing: border-box; min-width: 0; min-height: 0; }
.ls-canonical-left-float { grid-column: 1; }
.ls-canonical-frame { grid-column: 2; }
.ls-canonical-right-float { grid-column: 3; }
.ls-element-shell { position: absolute; box-sizing: border-box; min-width: 0; min-height: 0; }
.ls-element-shell > .ls-rendered-element { width: 100%; height: 100%; min-width: 0 !important; min-height: 0 !important; max-width: none; max-height: none; box-sizing: border-box; margin: 0; transform: none !important; }
.ls-render-missing-native { display: none !important; }

/* Packet 04 image display controls */
.ls-custom-image,.ls-custom-decoration { overflow:hidden; }
.ls-custom-image > img,.ls-custom-decoration > img,
.ls-custom-image-link,.ls-custom-image-link > img { width:100%; height:100%; display:block; }
.ls-custom-image-link { overflow:hidden; }

/* Packet 06: retain the published Homepage page-shell surface after canonical hydration. */
body[data-layout-page="homepage"] .ls-canonical-stage[data-renderer-page="homepage"] .ls-canonical-frame {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: var(--custom-site-surface);
  box-shadow: none;
}
body[data-layout-page="homepage"] .ls-canonical-stage[data-renderer-page="homepage"] .ls-canonical-frame::before {
  content: "";
  position: absolute;
  inset: var(--image-frame-shell-inset);
  z-index: -1;
  pointer-events: none;
  background: center / 100% 100% no-repeat var(--image-frame-shell);
}

/* Packet 06.0.3: canonical visual surfaces and selectable structural chrome. */
body[data-layout-page="homepage"] .ls-canonical-frame,
body[data-layout-page="diary"] .ls-canonical-frame {
  isolation: isolate;
  overflow: visible;
}

body[data-layout-page="homepage"] .ls-canonical-area,
body[data-layout-page="diary"] .ls-canonical-area {
  background-clip: padding-box;
}

.ls-element-shell > .ie-titlebar,
.ls-element-shell > .ie-menubar,
.ls-element-shell > .lace-divider {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.ls-element-shell > .ie-titlebar,
.ls-element-shell > .ie-menubar {
  box-sizing: border-box;
}

.ls-element-shell > .lace-divider {
  background-size: auto 100%;
}

/* Packet 09: nested Container composition core. */
.ls-custom-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--ls-container-padding-top, 0) var(--ls-container-padding-right, 0) var(--ls-container-padding-bottom, 0) var(--ls-container-padding-left, 0);
}
.ls-custom-container[data-container-layout="free"] { display: block; }
.ls-custom-container[data-container-layout="vertical"] {
  display: flex;
  flex-direction: column;
  gap: var(--ls-container-gap, 8px);
  align-items: var(--ls-container-align, flex-start);
  justify-content: var(--ls-container-justify, flex-start);
  flex-wrap: nowrap;
}
.ls-custom-container[data-container-layout="horizontal"] {
  display: flex;
  flex-direction: row;
  gap: var(--ls-container-gap, 8px);
  align-items: var(--ls-container-align, flex-start);
  justify-content: var(--ls-container-justify, flex-start);
  flex-wrap: nowrap;
}
.ls-custom-container[data-container-layout="horizontal"][data-container-wrap="true"],
.ls-custom-container[data-container-layout="vertical"][data-container-wrap="true"] { flex-wrap: wrap; }
.ls-custom-container[data-container-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--ls-container-columns, 2), minmax(0, 1fr));
  gap: var(--ls-container-gap, 8px);
  align-items: var(--ls-container-align, start);
  justify-content: var(--ls-container-justify, start);
}
.ls-nested-element-shell { box-sizing: border-box; min-width: 0; min-height: 0; }
.ls-custom-container[data-container-layout="free"] > .ls-nested-element-shell { position: absolute; }
.ls-custom-container:not([data-container-layout="free"]) > .ls-nested-element-shell { position: relative; inset: auto; flex: 0 0 auto; }
.ls-custom-container:not([data-container-layout="free"]) > .ls-nested-element-shell[data-width-mode="fill"] { align-self: stretch; width: 100% !important; }
.ls-custom-container[data-container-layout="horizontal"] > .ls-nested-element-shell[data-height-mode="fill"] { align-self: stretch; height: 100% !important; }
.ls-element-shell[data-width-mode="hug"] > .ls-rendered-element { width: max-content; }
.ls-element-shell[data-height-mode="hug"] > .ls-rendered-element { height: auto; }
.ls-element-shell[data-width-mode="fill"] > .ls-rendered-element { width: 100%; }
.ls-element-shell[data-height-mode="fill"] > .ls-rendered-element { height: 100%; }

/* Packet 11: predictable block spacing for editor-built text components. */
.ls-custom-text-content > p, .ls-repeater-rich-text > p { margin: 0; }
.ls-repeater-column-style { margin: 8px 0; padding: 8px; border: 1px solid rgba(180,120,150,.25); border-radius: 6px; }

/* LarSheen native appearance and source-based decoration layers v1. */
.ls-element-shell[data-ls-decoration-managed="true"],
.ls-canonical-stage[data-ls-decoration-managed="true"],
.ls-canonical-frame[data-ls-decoration-managed="true"],
.ls-canonical-area[data-ls-decoration-managed="true"] {
  isolation: isolate;
  overflow: visible;
}

/* Keep the renderer's canonical positioning contract intact.  Free-layout
   children are positioned by their shells, so decoration layering must never
   change those shells from absolute to relative positioning. */
.ls-element-shell[data-ls-decoration-managed="true"] > .ls-rendered-element {
  position: relative;
  z-index: 1;
}

.ls-canonical-stage[data-ls-decoration-managed="true"] > .ls-canonical-frame,
.ls-canonical-frame[data-ls-decoration-managed="true"] > .ls-canonical-area,
.ls-canonical-area[data-ls-decoration-managed="true"] > .ls-element-shell {
  z-index: 1;
}

.ls-decoration-layer {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: none !important;
  user-select: none;
}

.ls-decoration-slot-background { z-index: 0; }
.ls-decoration-slot-innerFrame { z-index: 2; }
.ls-native-decoration-layer { z-index: 2; }
.ls-decoration-slot-outerFrame { z-index: 0; }
.ls-decoration-slot-top,
.ls-decoration-slot-bottom,
.ls-decoration-slot-foreground { z-index: 4; }

/* Managed layers replace the former hardcoded pseudo-element frames. */
.ls-element-shell[data-ls-decoration-managed="true"] > .floating-menu::before,
.ls-element-shell[data-ls-decoration-managed="true"] > .panel::before,
.ls-element-shell[data-ls-decoration-managed="true"] > .mini-panel::before,
.ls-element-shell[data-ls-decoration-managed="true"] > .chatbox-placeholder::before,
.ls-element-shell[data-ls-decoration-managed="true"] > .visitors-title::before,
.ls-canonical-frame[data-ls-decoration-managed="true"]::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.ls-element-shell[data-ls-decoration-managed="true"] > .lace-divider {
  background-image: none !important;
}

.ls-canonical-area[data-ls-decoration-managed="true"] {
  border-image: none !important;
}

/* CSS-native decoration choices. */
.ls-native-decoration-layer {
  inset: 0;
  border-radius: inherit;
}

.ls-native-decoration-layer[data-native-decoration="inner-border"] {
  inset: var(--ls-native-decoration-thickness);
  border: var(--ls-native-decoration-thickness) solid var(--ls-native-decoration-color);
}

.ls-native-decoration-layer[data-native-decoration="header-strip"] {
  background: linear-gradient(var(--ls-native-decoration-color), var(--ls-native-decoration-secondary));
}
.ls-native-decoration-layer[data-native-decoration="header-strip"][data-decoration-position="top"] {
  inset: 0 0 auto 0;
  height: var(--ls-native-decoration-size);
}
.ls-native-decoration-layer[data-native-decoration="header-strip"][data-decoration-position="bottom"] {
  inset: auto 0 0 0;
  height: var(--ls-native-decoration-size);
}
.ls-native-decoration-layer[data-native-decoration="header-strip"][data-decoration-position="left"] {
  inset: 0 auto 0 0;
  width: var(--ls-native-decoration-size);
}
.ls-native-decoration-layer[data-native-decoration="header-strip"][data-decoration-position="right"] {
  inset: 0 0 0 auto;
  width: var(--ls-native-decoration-size);
}

.ls-native-decoration-layer[data-native-decoration="accent-line"] {
  background: var(--ls-native-decoration-color);
}
.ls-native-decoration-layer[data-native-decoration="accent-line"][data-decoration-position="top"] {
  inset: 0 0 auto 0;
  height: var(--ls-native-decoration-thickness);
}
.ls-native-decoration-layer[data-native-decoration="accent-line"][data-decoration-position="bottom"] {
  inset: auto 0 0 0;
  height: var(--ls-native-decoration-thickness);
}
.ls-native-decoration-layer[data-native-decoration="accent-line"][data-decoration-position="left"] {
  inset: 0 auto 0 0;
  width: var(--ls-native-decoration-thickness);
}
.ls-native-decoration-layer[data-native-decoration="accent-line"][data-decoration-position="right"] {
  inset: 0 0 0 auto;
  width: var(--ls-native-decoration-thickness);
}

.ls-native-decoration-layer[data-native-decoration="dots"] {
  background-image: radial-gradient(circle, var(--ls-native-decoration-color) 0 calc(var(--ls-native-decoration-thickness) / 2), transparent calc(var(--ls-native-decoration-thickness) / 2 + 1px));
  background-size: var(--ls-native-decoration-size) var(--ls-native-decoration-size);
}

.ls-native-decoration-layer[data-native-decoration="stripes"] {
  background-image: repeating-linear-gradient(135deg, var(--ls-native-decoration-color) 0 var(--ls-native-decoration-thickness), var(--ls-native-decoration-secondary) var(--ls-native-decoration-thickness) calc(var(--ls-native-decoration-thickness) * 2));
}

.ls-native-decoration-layer[data-native-decoration="scallop"] {
  background-repeat: repeat-x;
  background-size: var(--ls-native-decoration-size) var(--ls-native-decoration-size);
  background-image: radial-gradient(circle at 50% 0, var(--ls-native-decoration-color) 0 48%, transparent 51%);
}
.ls-native-decoration-layer[data-native-decoration="scallop"][data-decoration-position="top"] {
  inset: 0 0 auto 0;
  height: var(--ls-native-decoration-size);
}
.ls-native-decoration-layer[data-native-decoration="scallop"][data-decoration-position="bottom"] {
  inset: auto 0 0 0;
  height: var(--ls-native-decoration-size);
  transform: rotate(180deg);
}
.ls-native-decoration-layer[data-native-decoration="scallop"][data-decoration-position="left"],
.ls-native-decoration-layer[data-native-decoration="scallop"][data-decoration-position="right"] {
  width: var(--ls-native-decoration-size);
  height: 100%;
  background-repeat: repeat-y;
}
.ls-native-decoration-layer[data-native-decoration="scallop"][data-decoration-position="left"] {
  inset: 0 auto 0 0;
  transform: rotate(-90deg);
}
.ls-native-decoration-layer[data-native-decoration="scallop"][data-decoration-position="right"] {
  inset: 0 0 0 auto;
  transform: rotate(90deg);
}

.ls-native-inner-border-layer {
  z-index: 2;
  box-sizing: border-box;
}

/* Canonical appearance replaces the Diary browser's legacy side-line pseudo elements. */
body.diary-page .browser-window[data-ls-decoration-managed="true"]::before,
body.diary-page .browser-window[data-ls-decoration-managed="true"]::after {
  content: none !important;
  display: none !important;
}

/* Packet 05: first-class Divider and Decoration. */
.ls-custom-divider { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-width:0; min-height:0; box-sizing:border-box; }
.ls-custom-divider.is-horizontal .ls-divider-line { display:block; height:0; box-sizing:border-box; }
.ls-custom-divider.is-vertical .ls-divider-line { display:block; width:0; box-sizing:border-box; }
.ls-custom-divider.is-decorative { background-origin:border-box; background-clip:border-box; }
.ls-custom-decoration { overflow:hidden; }

/* Packet 06: real scroll viewports and designer-customizable scrollbar chrome. */
.ls-custom-container.ls-scroll-container {
  display: block !important;
  padding: 0 !important;
  overflow: visible;
}
.ls-scroll-shell {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  isolation: isolate;
}
.ls-scroll-viewport {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
  z-index: 1;
}
.ls-scroll-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ls-scroll-container[data-scroll-mode="clip"] .ls-scroll-viewport { overflow: hidden; }
.ls-scroll-container[data-scroll-mode="auto"] .ls-scroll-viewport,
.ls-scroll-container[data-scroll-mode="both"] .ls-scroll-viewport { overflow: auto; touch-action: pan-x pan-y; }
.ls-scroll-container[data-scroll-mode="vertical"] .ls-scroll-viewport { overflow-x: hidden; overflow-y: auto; touch-action: pan-y; }
.ls-scroll-container[data-scroll-mode="horizontal"] .ls-scroll-viewport { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; }

.ls-scroll-content {
  position: relative;
  box-sizing: border-box;
  min-width: 100%;
  min-height: 100%;
  padding: var(--ls-container-padding-top, 0) var(--ls-container-padding-right, 0) var(--ls-container-padding-bottom, 0) var(--ls-container-padding-left, 0);
}
.ls-scroll-content[data-container-layout="free"] { display: block; width: 100%; height: 100%; }
.ls-scroll-content[data-container-layout="vertical"] {
  display: flex;
  width: 100%;
  height: max-content;
  flex-direction: column;
  gap: var(--ls-container-gap, 8px);
  align-items: var(--ls-container-align, flex-start);
  justify-content: var(--ls-container-justify, flex-start);
  flex-wrap: nowrap;
}
.ls-scroll-content[data-container-layout="horizontal"] {
  display: flex;
  width: max-content;
  height: 100%;
  flex-direction: row;
  gap: var(--ls-container-gap, 8px);
  align-items: var(--ls-container-align, flex-start);
  justify-content: var(--ls-container-justify, flex-start);
  flex-wrap: nowrap;
}
.ls-scroll-content[data-container-layout="horizontal"][data-container-wrap="true"],
.ls-scroll-content[data-container-layout="vertical"][data-container-wrap="true"] { flex-wrap: wrap; }
.ls-scroll-content[data-container-layout="grid"] {
  display: grid;
  width: 100%;
  height: max-content;
  grid-template-columns: repeat(var(--ls-container-columns, 2), minmax(0, 1fr));
  gap: var(--ls-container-gap, 8px);
  align-items: var(--ls-container-align, start);
  justify-content: var(--ls-container-justify, start);
}
.ls-scroll-content[data-container-layout="free"] > .ls-nested-element-shell { position: absolute; }
.ls-scroll-content:not([data-container-layout="free"]) > .ls-nested-element-shell { position: relative; inset: auto; flex: 0 0 auto; }
.ls-scroll-content:not([data-container-layout="free"]) > .ls-nested-element-shell[data-width-mode="fill"] { align-self: stretch; width: 100% !important; }
.ls-scroll-content[data-container-layout="horizontal"] > .ls-nested-element-shell[data-height-mode="fill"] { align-self: stretch; height: 100% !important; }

.ls-scrollbar,
.ls-scrollbar-corner {
  position: absolute;
  box-sizing: border-box;
  z-index: 3;
  user-select: none;
  -webkit-user-select: none;
}
.ls-scrollbar { display: flex; }
.ls-scrollbar-vertical {
  width: var(--ls-scroll-thickness, 14px);
  flex-direction: column;
}
.ls-scrollbar-horizontal {
  height: var(--ls-scroll-thickness, 14px);
  flex-direction: row;
}
.ls-scroll-container[data-scroll-vertical-visible="false"] .ls-scrollbar-vertical,
.ls-scroll-container[data-scroll-horizontal-visible="false"] .ls-scrollbar-horizontal { display: none; }
.ls-scroll-container[data-scroll-visibility="hidden"] .ls-scrollbar,
.ls-scroll-container[data-scroll-visibility="hidden"] .ls-scrollbar-corner,
.ls-scroll-container[data-scroll-mode="clip"] .ls-scrollbar,
.ls-scroll-container[data-scroll-mode="clip"] .ls-scrollbar-corner { display: none !important; }

/* Overlay placement. */
.ls-scroll-container[data-scroll-placement="overlay"] .ls-scrollbar-vertical {
  top: var(--ls-scroll-inset, 0px);
  bottom: var(--ls-scroll-inset, 0px);
}
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-side="right"] .ls-scrollbar-vertical { right: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-side="left"] .ls-scrollbar-vertical { left: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="overlay"] .ls-scrollbar-horizontal {
  left: var(--ls-scroll-inset, 0px);
  right: var(--ls-scroll-inset, 0px);
}
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-horizontal { bottom: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-horizontal-side="top"] .ls-scrollbar-horizontal { top: var(--ls-scroll-inset, 0px); }

/* Reserve-space placement. */
.ls-scroll-container[data-scroll-placement="reserve"] .ls-scrollbar-vertical { top: 0; bottom: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-side="right"] .ls-scrollbar-vertical { right: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-side="left"] .ls-scrollbar-vertical { left: 0; }
.ls-scroll-container[data-scroll-placement="reserve"] .ls-scrollbar-horizontal { left: 0; right: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-horizontal { bottom: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-side="top"] .ls-scrollbar-horizontal { top: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="right"] .ls-scroll-viewport { right: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="left"] .ls-scroll-viewport { left: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="bottom"] .ls-scroll-viewport { bottom: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="top"] .ls-scroll-viewport { top: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-vertical { bottom: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="top"] .ls-scrollbar-vertical { top: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="right"] .ls-scrollbar-horizontal { right: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="left"] .ls-scrollbar-horizontal { left: calc(var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px)); }

/* Outside-edge placement. */
.ls-scroll-container[data-scroll-placement="outside"] .ls-scrollbar-vertical { top: var(--ls-scroll-inset, 0px); bottom: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-side="right"] .ls-scrollbar-vertical { right: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-side="left"] .ls-scrollbar-vertical { left: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"] .ls-scrollbar-horizontal { left: var(--ls-scroll-inset, 0px); right: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-horizontal { bottom: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-horizontal-side="top"] .ls-scrollbar-horizontal { top: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }

.ls-scrollbar-corner {
  width: var(--ls-scroll-thickness, 14px);
  height: var(--ls-scroll-thickness, 14px);
}
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-side="right"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-corner { right: 0; bottom: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-side="right"][data-scroll-horizontal-side="top"] .ls-scrollbar-corner { right: 0; top: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-side="left"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-corner { left: 0; bottom: 0; }
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-side="left"][data-scroll-horizontal-side="top"] .ls-scrollbar-corner { left: 0; top: 0; }
.ls-scroll-container:not([data-scroll-placement="reserve"]) .ls-scrollbar-corner { display: none !important; }

.ls-scrollbar-button,
.ls-scrollbar-track,
.ls-scrollbar-thumb,
.ls-scrollbar-corner {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: var(--ls-scroll-icon-color, currentColor);
  opacity: var(--ls-scroll-opacity, 1);
  border: var(--ls-scroll-border-width, 1px) var(--ls-scroll-border-style, solid) var(--ls-scroll-border-color, transparent);
  border-radius: var(--ls-scroll-radius, 0);
  background-color: var(--ls-scroll-bg-normal, transparent);
  background-image: var(--ls-scroll-asset-normal, none);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: var(--ls-scroll-repeat, no-repeat);
}
.ls-scrollbar-button:hover:not(:disabled),
.ls-scrollbar-track:hover,
.ls-scrollbar-thumb:hover:not(.is-disabled) {
  background-color: var(--ls-scroll-bg-hover, var(--ls-scroll-bg-normal, transparent));
  background-image: var(--ls-scroll-asset-hover, var(--ls-scroll-asset-normal, none));
}
.ls-scrollbar-button.is-pressed:not(:disabled),
.ls-scrollbar-thumb.is-pressed:not(.is-disabled) {
  background-color: var(--ls-scroll-bg-pressed, var(--ls-scroll-bg-normal, transparent));
  background-image: var(--ls-scroll-asset-pressed, var(--ls-scroll-asset-normal, none));
}
.ls-scrollbar-button:disabled,
.ls-scrollbar-thumb.is-disabled {
  background-color: var(--ls-scroll-bg-disabled, var(--ls-scroll-bg-normal, transparent));
  background-image: var(--ls-scroll-asset-disabled, var(--ls-scroll-asset-normal, none));
  cursor: default;
  opacity: .6;
}
[data-source="asset"][data-render-mode="repeat"] { background-size: auto; }
[data-source="asset"][data-render-mode="nineSlice"] {
  background-image: none !important;
  border-image-source: var(--ls-scroll-asset-normal, none);
  border-image-slice: var(--ls-scroll-slice, 4 4 4 4) fill;
  border-image-repeat: stretch;
}
[data-source="asset"][data-render-mode="nineSlice"]:hover { border-image-source: var(--ls-scroll-asset-hover, var(--ls-scroll-asset-normal, none)); }
[data-source="asset"][data-render-mode="nineSlice"].is-pressed { border-image-source: var(--ls-scroll-asset-pressed, var(--ls-scroll-asset-normal, none)); }
[data-source="asset"][data-render-mode="nineSlice"]:disabled,
[data-source="asset"][data-render-mode="nineSlice"].is-disabled { border-image-source: var(--ls-scroll-asset-disabled, var(--ls-scroll-asset-normal, none)); }

.ls-scrollbar-button {
  display: grid;
  flex: 0 0 var(--ls-scroll-button-size, var(--ls-scroll-thickness, 14px));
  place-items: center;
  min-width: 0;
  min-height: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.ls-scrollbar-button-icon { color: var(--ls-scroll-icon-color, currentColor); font-size: min(10px, calc(var(--ls-scroll-thickness, 14px) - 3px)); line-height: 1; }
.ls-scrollbar-track { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer; }
.ls-scrollbar-thumb { position: absolute; top: 0; left: 0; min-width: 8px; min-height: 8px; cursor: grab; touch-action: none; will-change: transform; }
.ls-scrollbar-thumb.is-pressed { cursor: grabbing; }

/* Packet 06 final placement/state refinements. */
.ls-scrollbar-button[data-source="styled"],
.ls-scrollbar-track[data-source="styled"],
.ls-scrollbar-thumb[data-source="styled"],
.ls-scrollbar-corner[data-source="styled"] { background-image: none !important; }
[data-source="asset"][data-render-mode="nineSlice"] { border-image-repeat: var(--ls-scroll-border-repeat, stretch); }

/* Apply inset consistently and reserve the configured gap between viewport and chrome. */
.ls-scroll-container[data-scroll-placement="reserve"] .ls-scrollbar-vertical {
  top: var(--ls-scroll-inset, 0px);
  bottom: var(--ls-scroll-inset, 0px);
}
.ls-scroll-container[data-scroll-placement="reserve"] .ls-scrollbar-horizontal {
  left: var(--ls-scroll-inset, 0px);
  right: var(--ls-scroll-inset, 0px);
}

/* When both bars are visible, shorten them so their functional tracks meet the corner rather than overlap it. */
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-vertical,
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-vertical {
  bottom: calc(var(--ls-scroll-inset, 0px) + var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px));
}
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="top"] .ls-scrollbar-vertical,
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="top"] .ls-scrollbar-vertical {
  top: calc(var(--ls-scroll-inset, 0px) + var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px));
}
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="right"] .ls-scrollbar-horizontal,
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="right"] .ls-scrollbar-horizontal {
  right: calc(var(--ls-scroll-inset, 0px) + var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px));
}
.ls-scroll-container[data-scroll-placement="reserve"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="left"] .ls-scrollbar-horizontal,
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="left"] .ls-scrollbar-horizontal {
  left: calc(var(--ls-scroll-inset, 0px) + var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px));
}

/* Corner positions for reserve and overlay chrome. */
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-side="right"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-corner { right: var(--ls-scroll-inset, 0px); bottom: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-side="right"][data-scroll-horizontal-side="top"] .ls-scrollbar-corner { right: var(--ls-scroll-inset, 0px); top: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-side="left"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-corner { left: var(--ls-scroll-inset, 0px); bottom: var(--ls-scroll-inset, 0px); }
.ls-scroll-container[data-scroll-placement="overlay"][data-scroll-vertical-side="left"][data-scroll-horizontal-side="top"] .ls-scrollbar-corner { left: var(--ls-scroll-inset, 0px); top: var(--ls-scroll-inset, 0px); }

/* Outside bars extend toward the configured corner and remain independent of Page geometry. */
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-vertical { bottom: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-horizontal-visible="true"][data-scroll-horizontal-side="top"] .ls-scrollbar-vertical { top: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="right"] .ls-scrollbar-horizontal { right: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-visible="true"][data-scroll-vertical-side="left"] .ls-scrollbar-horizontal { left: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-side="right"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-corner { right: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); bottom: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-side="right"][data-scroll-horizontal-side="top"] .ls-scrollbar-corner { right: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); top: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-side="left"][data-scroll-horizontal-side="bottom"] .ls-scrollbar-corner { left: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); bottom: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }
.ls-scroll-container[data-scroll-placement="outside"][data-scroll-vertical-side="left"][data-scroll-horizontal-side="top"] .ls-scrollbar-corner { left: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); top: calc(-1 * (var(--ls-scroll-thickness, 14px) + var(--ls-scroll-gap, 0px))); }

/* The corner is functional visual chrome for every placement when both bars meet. */
.ls-scroll-container:not([data-scroll-placement="reserve"]) .ls-scrollbar-corner { display: block; }
.ls-scroll-container[data-scroll-vertical-visible="false"] .ls-scrollbar-corner,
.ls-scroll-container[data-scroll-horizontal-visible="false"] .ls-scrollbar-corner,
.ls-scroll-container[data-scroll-visibility="hidden"] .ls-scrollbar-corner,
.ls-scroll-container[data-scroll-mode="clip"] .ls-scrollbar-corner,
.ls-scrollbar-corner[hidden] { display: none !important; }
.ls-scroll-container:not([data-scroll-placement="reserve"])[data-scroll-vertical-visible="true"][data-scroll-horizontal-visible="true"] .ls-scrollbar-corner:not([hidden]) { display: block !important; }