/* Smart Stone Studio — panel cards, swatches, quick-add, rail, 3-area grid (cycle-1 redesign). */

/* ---- Labelled color swatch tags ---- */
.sss-studio .swatches-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; }
.sss-studio .swatches-row > .swatch { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px;
        flex-direction: row; position: relative; width: auto; min-width: 0; min-height: 36px; padding: 7px 14px; border-radius: 999px;
        border: 1.5px solid var(--sss-studio-border); background: var(--sss-studio-surface);
        font-size: var(--sss-studio-fs-hint); font-weight: 600; color: var(--sss-studio-ink); cursor: pointer; }
.sss-studio .swatch:focus-visible { outline: 2px solid var(--sss-studio-accent); outline-offset: 2px; }
.sss-studio .swatches-row > .swatch.sel { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
.sss-studio .swatch-tag-dot { width: 14px; height: 14px; border-radius: 50%; flex: none;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.sss-studio .swatch-tag-label { white-space: nowrap; }
.sss-studio .swatch-tag-premium { opacity: 1; font-weight: 500; color: var(--sss-studio-ink); }
.sss-studio .swatch-none .swatch-tag-dot { background: var(--sss-studio-surface); position: relative; overflow: hidden; }
.sss-studio .swatch-none .swatch-tag-dot::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px;
        width: 1.5px; background: #c0392b; transform: rotate(45deg); }
.sss-studio .swatch-check { color: var(--sss-studio-accent); font-size: 13px; line-height: 1; }
.sss-studio .swatch[data-tip]:hover::before,
.sss-studio .swatch[data-tip]:focus-visible::before { content: attr(data-tip); position: absolute;
  bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: #2f2a24; color: #f5f1ea;
  font-size: 11px; padding: 3px 8px; border-radius: 5px; white-space: nowrap; z-index: 30; pointer-events: none; }
.sss-studio .swatch-caption { margin-top: 6px; font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); }
@media (min-width: 761px) { .sss-studio .swatch-caption { display: none; } }

/* ---- Collapsible panel cards ---- */
.sss-studio .panel-section-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.sss-studio .panel-section-summary::-webkit-details-marker { display: none; }
.sss-studio .panel-section .panel-chevron { transition: transform .16s ease; color: var(--sss-studio-muted); flex: none; }
.sss-studio .panel-section[open] > .panel-section-summary .panel-chevron { transform: rotate(180deg); }

/* ---- Alignment icon buttons ---- */
.sss-studio .align-icons .alignbtn { display: flex; align-items: center; justify-content: center; min-width: 44px; }

/* ---- Quick-add footer ---- */
.sss-studio .quick-add { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sss-studio-border);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sss-studio .quick-add-label { flex-basis: 100%; font-size: var(--sss-studio-fs-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--sss-studio-muted); }
.sss-studio .quick-add-btn { border: 1px dashed var(--sss-studio-border); background: var(--sss-studio-surface);
  border-radius: 999px; padding: 7px 12px; font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-accent);
  cursor: pointer; min-height: 36px; }
.sss-studio .quick-add-btn:hover { border-color: var(--sss-studio-accent); }
@media (prefers-reduced-motion: reduce) { .sss-studio .panel-section .panel-chevron { transition: none; } }

/* ---- Legacy hidden-dates notice ---- */
.sss-studio .legacy-hidden-notice { background: color-mix(in srgb, var(--sss-studio-accent) 8%, var(--sss-studio-surface));
  border: 1px solid var(--sss-studio-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
  font-size: var(--sss-studio-fs-hint); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- Pinned add-element button ---- */
.sss-studio .outline-add { position: sticky; bottom: 0; z-index: 5; width: calc(100% - 24px); margin: 10px 12px;
  border: 1.5px dashed var(--sss-studio-border); background: var(--sss-studio-surface); border-radius: 10px;
  padding: 12px; font-size: var(--sss-studio-fs-body); font-weight: 600; color: var(--sss-studio-accent);
  cursor: pointer; min-height: 44px; box-shadow: 0 -6px 12px rgba(43,41,37,.06); }
.sss-studio .outline-add:hover { border-color: var(--sss-studio-accent); }

/* ---- Adaptive 3-area desktop grid ---- */
.sss-studio .main.three-col { grid-template-columns: minmax(220px, 240px) minmax(320px, 360px) minmax(0, 1fr); }
.sss-studio .main.three-col .outline-col,
.sss-studio .main.three-col .settings-col { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--sss-studio-surface); border-right: 1px solid var(--sss-studio-border); }
.sss-studio .main.three-col .outline,
.sss-studio .main.three-col .inspector { flex: 1; min-height: 0; overflow-y: auto; border: 0; }
.sss-studio .main.three-col .canvas-scroll { padding: 20px 18px 22px; }

/* ---- Mobile two-state rail ---- */
@media (max-width: 760px) {
  .sss-studio .settings-sheet-body { position: relative; }
  .sss-studio .sheet-pane { position: absolute; inset: 0; display: flex; opacity: 0; pointer-events: none;
    transform: translateX(12px); transition: opacity .22s cubic-bezier(.25,1,.5,1), transform .22s cubic-bezier(.25,1,.5,1); }
  .sss-studio .sheet-pane-overview { flex-direction: column; transform: translateX(-12px); }
  .sss-studio .sheet-pane-active { flex-direction: row; }
  .sss-studio [data-sheet-view="overview"] .sheet-pane-overview,
  .sss-studio [data-sheet-view="active"] .sheet-pane-active { opacity: 1; pointer-events: auto; transform: none; }
  .sss-studio .mrail { width: 56px; flex: none; display: flex; flex-direction: column;
    border-right: 1px solid var(--sss-studio-border); background: var(--sss-studio-surface); }
  .sss-studio .mrail-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; }
  .sss-studio .mrail-item { width: 44px; height: 44px; min-height: 44px; border-radius: 10px;
    border: 1px solid var(--sss-studio-border); background: var(--sss-studio-surface); display:flex; align-items:center; justify-content:center; font-size:13px; padding:0; }
  .sss-studio .mrail-item svg { width:26px; height:26px; }
  .sss-studio .mrail-item.on { border-color:var(--sss-studio-accent); font-weight:700; background:color-mix(in srgb, var(--sss-studio-accent) 12%, var(--sss-studio-surface)); }
  .sss-studio .mrail-add { margin:6px; border-style:dashed; flex:none; }
  .sss-studio .sheet-pane-active .inspector { flex:1; min-width:0; }
}