/* NUNO STUDIO shared UI components
 * Loaded by both the iframe editor and external Mirror UI.
 * This file owns only reusable visual components, never NUNO application state.
 */

/* Mirror-side baseline. The iframe receives equivalent page typography from its
 * normal page stylesheet; keeping the variables here lets Module CSS render the
 * same way inside isolated Shadow DOM. */
.nstudio-ui-mirror-root{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  font-weight:400;
  color:#293530;
  text-align:left;
  letter-spacing:normal;
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#252f2b;
  --sub:#596761;
  --line:#d7ddd9;
  --accent:#1f4f46;
  --accent-light:#e8f0ed;
  --gold:#b79b5b;
}
.nstudio-ui-mirror-root *,
.nstudio-ui-mirror-root *::before,
.nstudio-ui-mirror-root *::after{box-sizing:border-box}
.nstudio-ui-mirror-root button,
.nstudio-ui-mirror-root input,
.nstudio-ui-mirror-root select,
.nstudio-ui-mirror-root textarea{font-family:inherit;color:inherit}

/* ===== Shared color palette ===== */
.nstudio-page .nstudio-color-name-trigger{
  --nstudio-color-chip:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  
  min-width:0;
  max-width:118px;
  
  margin:0;
  
  border:1px solid #d4ddd9;
  border-radius:7px;
  background:#f8faf9;
  color:#3d4b46;
  font:700 12px/1.2 "Noto Sans JP","Hiragino Sans","Yu Gothic",Arial,sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  box-shadow:none;
  vertical-align:middle;
}
.nstudio-page .nstudio-color-name-trigger:hover{background:#eef3f1;border-color:#b8c8c2;color:#2d4039}



.nstudio-page .nstudio-svg-color-input .nstudio-color-name-trigger{max-width:110px}


.nstudio-color-palette-popover{
  position:fixed;
  z-index:2147483200;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  padding:7px;
  border:1px solid #cfd9d5;
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 30px rgba(29,45,39,.18);
  box-sizing:border-box;
}
.nstudio-color-palette-popover[hidden]{display:none}
.nstudio-color-palette-option{
  --nstudio-palette-swatch:#fff;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  min-height:32px;
  padding:5px 7px;
  border:1px solid transparent;
  border-radius:7px;
  background:#fff;
  color:#36443f;
  cursor:pointer;
  text-align:left;
}
.nstudio-color-palette-option:hover,
.nstudio-color-palette-option.is-active{border-color:#a9beb6;background:#f1f6f4}
.nstudio-color-palette-option>span{flex:0 0 16px;width:16px;height:16px;border:1px solid rgba(0,0,0,.18);border-radius:50%;background:var(--nstudio-palette-swatch);box-sizing:border-box}
.nstudio-color-palette-option>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px/1.2 "Noto Sans JP","Hiragino Sans","Yu Gothic",Arial,sans-serif}
@media(max-width:520px){.nstudio-color-palette-popover{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ===== Color palette usability refinements ===== */
.nstudio-page .nstudio-color-name-trigger{
  min-height:34px;
  padding:5px 9px;
  gap:7px;
  font-size:12px;
}
.nstudio-page .nstudio-color-name-trigger::before{
  content:"";
  display:block;
  flex:0 0 14px;
  width:14px;
  min-width:14px;
  height:14px;
  min-height:14px;
  aspect-ratio:1/1;
  border:1px solid rgba(0,0,0,.28);
  border-radius:999px;
  background:var(--nstudio-color-chip);
  box-sizing:border-box;
}
.nstudio-page .nstudio-color-name-trigger::after{
  content:"▾";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-left:auto;
  color:#6b7873;
  font-size:12px;
  line-height:1;
  transition:transform .15s ease;
}
.nstudio-page .nstudio-color-name-trigger[aria-expanded="true"]::after{transform:rotate(180deg)}

.nstudio-page .nstudio-tie-subfield .nstudio-color-name-trigger{
  width:100%;
  max-width:none;
}
.nstudio-page .spec-field-sewing .nstudio-tie-subfield{
  grid-template-columns:48px 42px minmax(0,1fr);
}
.nstudio-color-palette-option>strong{font-size:12px}

/* ===== Shared piece-input layout =====
 * Used by split size/color controls in both the iframe and Mirror UI. */
.nstudio-page .nstudio-piece-inputs{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:8px;
}
.nstudio-page .nstudio-piece-input-row{
  display:grid;
  grid-template-columns:minmax(48px,auto) minmax(0,1fr);
  align-items:center;
  gap:8px;
}
.nstudio-page .nstudio-piece-input-row > span:first-child{
  font-size:12px;
  color:#666;
  white-space:nowrap;
}
.nstudio-page .nstudio-piece-input-row .image-size-input-wrap{width:100%}

/* ===== Shared AI color-assist launcher =====
 * The panel/results remain owned by the color-assist Module. Only the
 * reusable launcher shell belongs to the common UI layer. */
.nstudio-page .nstudio-color-assist{
  order:99;
  grid-column:1/-1;
  justify-self:stretch;
  width:100%;
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid #e2e6ea;
  box-sizing:border-box;
}
.nstudio-page .nstudio-color-assist-launch{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:3px 7px;
  border:1px solid #d4dbe1;
  border-radius:6px;
  background:#f8fafb;
  color:#61717e;
  font:inherit;
  font-size:10.5px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  box-sizing:border-box;
}
.nstudio-page .nstudio-color-assist-launch:hover{border-color:#9aabb9;background:#f1f5f8;color:#284b69}
.nstudio-page .nstudio-color-assist-launch[aria-expanded="true"]{border-color:#587a98;background:#e8f0f6;color:#284f6d;box-shadow:0 0 0 2px rgba(88,122,152,.13)}
.nstudio-page .nstudio-color-assist-launch:disabled{opacity:.55;cursor:wait}
.nstudio-page .nstudio-color-assist-ai{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:17px;
  padding:0 4px;
  border-radius:4px;
  background:#536f8a;
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  box-sizing:border-box;
}

/* ===== Shared side drawer =====
 * Module drawers (including the MonYou pattern picker) use the same shell in
 * the iframe and in an isolated Mirror. Module CSS owns only drawer content. */
.nstudio-page .nstudio-side-drawer{
  position:fixed;
  z-index:99900;
  top:0;
  right:0;
  width:min(540px,calc(100vw - 28px));
  height:100dvh;
  max-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid #dce4e1;
  background:#fff;
  box-shadow:-16px 0 40px rgba(23,38,33,.11);
  transform:translateX(102%);
  transition:transform .2s ease;
}
.nstudio-page .nstudio-side-drawer.is-open{transform:translateX(0)}
.nstudio-page .nstudio-side-drawer-head{
  flex:0 0 auto;
  min-height:64px;
  padding:12px 15px;
  border-bottom:1px solid rgba(63,82,76,.07);
  background:#fbfcfb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nstudio-page .nstudio-side-drawer-head>div{display:grid;gap:2px}
.nstudio-page .nstudio-side-drawer-head strong{display:block;font-size:15px;color:#26332e}
.nstudio-page .nstudio-side-drawer-head small{display:block;margin-top:2px;color:#7d8985;font-size:12px;font-weight:400;line-height:1.45}
.nstudio-page .nstudio-drawer-close{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:34px;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:8px;
  background:#f5f7f6;
  color:#3f4c47;
  box-shadow:inset 0 0 0 1px rgba(65,88,81,.045);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.nstudio-page .nstudio-drawer-close:hover{background:#eef3f1}
.nstudio-page .nstudio-side-drawer-body{
  flex:1 1 auto;
  min-height:0;
  padding:14px;
  overflow:auto;
  overscroll-behavior:contain;
}
/* Shared size split state: aggregate size is hidden while per-piece input is active.
 * This is semantic UI state, not an iframe-only layout rule, so the iframe and
 * parent Mirror must use the same rule. */
.nstudio-page .image-size-field.is-piece-split > .image-size-input-wrap{
  display:none;
}



/* External Mirror readability: keep the shared launcher design, increase only
 * reading/target sizes for the page presentation. */
.nstudio-page.nstudio-ui-mirror-root .nstudio-color-assist{
  margin-top:16px;
  padding-top:14px;
}
.nstudio-page.nstudio-ui-mirror-root .nstudio-color-assist-launch{
  min-height:42px;
  padding:9px 12px;
  gap:9px;
  color:#354842;
  font-size:14px;
  font-weight:750;
  line-height:1.4;
}
.nstudio-page.nstudio-ui-mirror-root .nstudio-color-assist-ai{
  min-width:28px;
  height:22px;
  padding:0 6px;
  font-size:11px;
  font-weight:800;
}

/* External/Mirror palette: compact two-column picker. The standalone iframe
 * keeps its existing palette geometry. */
.nstudio-color-palette-popover--mirror{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:7px;
}
.nstudio-color-palette-popover--mirror .nstudio-color-palette-option{min-height:36px;padding:6px 8px}
.nstudio-color-palette-popover--mirror .nstudio-color-palette-option>strong{font-size:13px;color:#34463f}