/* NAG Color Palette Grid — v1.7.0 (Desktop tabs + mobile select) */
.nag-color-palette{
  --tab-accent:#e0e0e0;
  --border:#e0e0e0;
  --muted:#757575;
  --hint-bg:#f5f5f5;
  --row-gap:12px;
  --card-min:160px;
  max-width:100%;
  width:100%;
  isolation:isolate;
  box-sizing:border-box;
  overflow:hidden;
  font:inherit;
  background:transparent;
}
.nag-color-palette *, .nag-color-palette *::before, .nag-color-palette *::after { box-sizing: inherit; }

/* Tabs (desktop) */
.nag-tabs{
  display:flex;
  overflow-y:hidden; /* prevent vertical scrollbar on tablet/medium */
  align-items:flex-end;
  justify-content:flex-start;
  gap:6px;
  overflow-x:auto;
  padding:4px 0px 0;
  margin-bottom:-1px;
  scrollbar-width:thin;
  background:#fff;
}
.nag-tabs::-webkit-scrollbar{height:8px}
.nag-tabs::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}
.nag-tabpair{display:inline-flex;align-items:flex-end}
.nag-tab-input{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;}
.nag-tab{display:inline-block;padding:8px 14px;margin:0 0 -1px 0;border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;background:#fff;color:#222;white-space:nowrap;cursor:pointer;user-select:none;font-size:14px;}
.nag-tab:hover{background:#fff}
.nag-tab.is-active{background:#fff;color:#000;border-color:var(--tab-accent);font-weight:600;}

/* Mobile select nav (hidden on desktop) */
.nag-tabs-mobile{ display:none; margin:8px 0 0; }
.nag-select-label{ display:block; font-size:14px; color:#555; margin:0 0 6px 2px; }
.nag-tab-select{ margin-bottom:6px;
  width:100%; padding:10px 17px 10px 12px; font-size:14px; color:#222; background:#fff;
  border:1px solid var(--border); border-radius:8px; outline:none;
}

/* Panels */
.nag-panels{border:1px solid var(--tab-accent);border-radius:0 12px 12px 12px;padding:clamp(10px,2vw,16px);background:#fff;max-width:100%;overflow:hidden;}
.nag-panel{display:none}
.nag-panel.is-active{display:grid}

/* Grid */
.nag-panel{gap:var(--row-gap);grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr));min-width:0}

/* Cards */
.nag-card{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  box-shadow:0 2px 3px rgba(0,0,0,.08), 0 0px 0px rgba(0,0,0,.06);
}
.nag-swatch{position:relative;height:72px;background:var(--swatch);border-bottom:1px solid var(--border)}
.nag-name{margin:10px 10px 6px;font-size:18px;line-height:1.3;}

/* Tooltip on swatch */
.nag-tip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;line-height:1;opacity:0;pointer-events:none;transition:opacity .15s ease-out;white-space:nowrap;}
.nag-tip.show{opacity:1}

/* Codes */
.nag-codes{
  padding:10px 10px 16px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nag-code-row{display:block}
.nag-code::before{content:attr(data-label);display:inline-block;margin-right:8px;font-size:11px;color:#555;letter-spacing:.02em;text-transform:uppercase}
.nag-code{background:#f9f9f9;border:1px solid var(--border);border-radius:6px;padding:6px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#333;display:block;width:100%;min-width:0;white-space:nowrap;word-break:normal;transition:background .2s,border-color .2s, box-shadow .2s;cursor:pointer;}
.nag-code:focus{outline:none;box-shadow:0 0 0 2px rgba(102,187,106,.25);}
.nag-code.copied{background:#eefaf0;border-color:#a5d6a7}
.nag-code[data-label="CMYK"]{letter-spacing:-0.2px}

/* Mobile: hide tabs, show select */
@media (max-width:640px){
  .nag-tabs{ display:none; }
  .nag-tabs-mobile{ display:block; }
  .nag-color-palette{ --card-min:150px; }
}


/* iOS/Safari select height fix */
.nag-tab-select{ min-height:44px; } /* ensures comfortable tap target and prevents shrink */
@supports (-webkit-touch-callout: none) {
  .nag-tab-select{ height:44px; line-height:1.2; }
}


/* Mobile CMYK overflow fix */
@media (max-width:640px){
  .nag-code[data-label="CMYK"]{
    white-space: normal;           /* allow wrapping */
    overflow-wrap: anywhere;       /* break long tokens if needed */
    word-break: break-word;
    font-size: 11px;               /* slight reduction for small screens */
    letter-spacing: -0.4px;        /* tighter to fit 100 values */
  }
}