/* GridCraft — matched to the hardikkhunt.com watercolor design system.
   Font families (Fraunces / Instrument Sans / IBM Plex Mono) are assumed
   already loaded site-wide by the theme; generic fallbacks are included
   below in case this shortcode is ever used on a different theme. */
:root{
  --gc-paper:#FEFDFB;
  --gc-fog:#F7F3EE;
  --gc-ink:#17181C;
  --gc-slate:#6E6A63;
  --gc-hairline:#E9E2D8;
  --gc-blush:#F1C6BE;
  --gc-sky:#C3D9E8;
  --gc-rosewood:#A8574E;
  --gc-radius:14px;
  --gc-shadow: 0 20px 44px -26px rgba(23,24,28,0.18);
  --gc-ease: cubic-bezier(.16,1,.3,1);
}

.gc-wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 20px 40px;
  font-family:'Instrument Sans', -apple-system, sans-serif;
  color:var(--gc-ink);
  background:var(--gc-paper);
}
.gc-wrap *{ box-sizing:border-box; }
.gc-wrap details > summary{ list-style:none; cursor:pointer; }
.gc-wrap details > summary::-webkit-details-marker{ display:none; }

/* ---------- Header ---------- */
.gc-header{ position:relative; overflow:hidden; padding:44px 24px 32px; text-align:center; border-radius:var(--gc-radius); margin-bottom:24px; }
.gc-header-inner{ position:relative; z-index:2; }
.gc-bloom{ position:absolute; filter:blur(36px); mix-blend-mode:multiply; opacity:0.55; border-radius:45% 55% 60% 40%/50% 45% 55% 50%; pointer-events:none; }
.gc-bloom-a{ width:220px; height:200px; background:var(--gc-blush); top:-70px; left:-30px; }
.gc-bloom-b{ width:200px; height:180px; background:var(--gc-sky); top:-50px; right:-20px; }
.gc-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gc-slate); margin-bottom:10px; }
.gc-title{ font-family:'Fraunces', Georgia, serif; font-weight:340; font-size:clamp(30px,4.2vw,42px); letter-spacing:-0.01em; margin:0 0 8px; }
.gc-accent{ color:var(--gc-rosewood); font-style:italic; }
.gc-subtitle{ color:var(--gc-slate); font-size:15px; line-height:1.6; margin:0; max-width:420px; margin-inline:auto; }

/* ---------- Workspace shell ---------- */
.gc-workspace{ border:1px solid var(--gc-hairline); border-radius:var(--gc-radius); background:var(--gc-paper); box-shadow:var(--gc-shadow); padding:28px; }

.gc-step{ animation: gc-fade 200ms var(--gc-ease); }
@keyframes gc-fade{ from{ opacity:0; transform:scale(0.99); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .gc-step{ animation:none; } }

/* ---------- Upload ---------- */
.gc-upload{
  border:1.5px dashed var(--gc-hairline);
  border-radius:12px;
  padding:44px 24px;
  text-align:center;
  cursor:pointer;
  transition: border-color 180ms var(--gc-ease), background 180ms var(--gc-ease);
  max-width:480px;
  margin:0 auto;
}
.gc-upload:hover, .gc-upload:focus-visible, .gc-upload.gc-dragover{
  border-color:var(--gc-rosewood);
  background:var(--gc-fog);
  outline:none;
}
.gc-upload:focus-visible{ box-shadow:0 0 0 3px rgba(168,87,78,0.15); }
.gc-upload-icon{ color:var(--gc-slate); margin-bottom:12px; }
.gc-upload-title{ font-size:16px; font-weight:600; margin-bottom:6px; }
.gc-upload-desc{ color:var(--gc-slate); font-size:13px; line-height:1.6; margin:0; }
.gc-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.gc-error{ max-width:480px; margin:14px auto 0; background:#FBEEEC; border:1px solid #F1D2CC; color:#8C3A32; border-radius:10px; padding:10px 14px; font-size:13px; text-align:center; }
.gc-success{ max-width:480px; margin:0 auto 20px; background:#EFF6EC; border:1px solid #CFE6D2; color:#2F5D3A; border-radius:10px; padding:10px 14px; font-size:13px; text-align:center; }

/* ---------- Disclosures (recommended sizes / posting order) ---------- */
.gc-disclosure{ max-width:480px; margin:16px auto 0; border-top:1px solid var(--gc-hairline); padding-top:14px; }
.gc-disclosure summary{ font-size:13px; font-weight:500; color:var(--gc-slate); display:flex; align-items:center; gap:6px; }
.gc-disclosure summary::before{ content:'›'; display:inline-block; transition:transform 180ms var(--gc-ease); font-size:14px; }
.gc-disclosure[open] summary::before{ transform:rotate(90deg); }
.gc-disclosure summary:hover{ color:var(--gc-ink); }
.gc-disclosure-body{ padding-top:14px; }
.gc-disclosure-note{ color:var(--gc-slate); font-size:13px; line-height:1.6; margin:10px 0 0; }
.gc-disclosure-compact{ margin:16px 0 0; padding-top:12px; }
.gc-disclosure-compact summary{ font-size:12px; }

.gc-sizes-table{ width:100%; border-collapse:collapse; font-size:13px; }
.gc-sizes-table th{ text-align:left; color:var(--gc-slate); font-weight:500; padding:6px 0; border-bottom:1px solid var(--gc-hairline); font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; }
.gc-sizes-table td{ padding:8px 0; border-bottom:1px solid var(--gc-hairline); }
.gc-sizes-table tr:last-child td{ border-bottom:none; }

/* ---------- Editor: canvas + sidebar, side by side (the "limited scroll" layout) ---------- */
.gc-editor-grid{ display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:start; }

.gc-editor-canvas-col{ display:flex; flex-direction:column; align-items:center; }
.gc-canvas-wrap{ display:flex; justify-content:center; width:100%; }
#gc-canvas{
  height:min(56vh, 520px); width:auto; max-width:100%;
  border-radius:12px; border:1px solid var(--gc-hairline); box-shadow:var(--gc-shadow);
  cursor:grab; touch-action:none; display:block;
}
#gc-canvas:active{ cursor:grabbing; }
#gc-canvas:focus-visible{ outline:2px solid var(--gc-rosewood); outline-offset:3px; }
.gc-canvas-hint{ color:var(--gc-slate); font-size:12px; margin-top:10px; }

.gc-sidebar{ display:flex; flex-direction:column; gap:20px; height:100%; }
.gc-sidebar-block{ border-top:1px solid var(--gc-hairline); padding-top:16px; }
.gc-sidebar-block:first-child{ border-top:none; padding-top:0; }
.gc-sidebar-block-grow{ flex:1; display:flex; flex-direction:column; min-height:0; }
.gc-sidebar-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gc-slate); margin-bottom:10px; }

/* Grid controls */
.gc-grid-controls{ display:flex; gap:16px; }
.gc-stepper{ flex:1; }
.gc-stepper label{ display:block; font-size:11px; color:var(--gc-slate); margin-bottom:6px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.06em; }
.gc-stepper-row{ display:flex; align-items:center; border:1px solid var(--gc-hairline); border-radius:100px; overflow:hidden; }
.gc-step-btn{ width:30px; height:32px; border:none; background:var(--gc-fog); color:var(--gc-ink); font-size:15px; cursor:pointer; transition:background 150ms var(--gc-ease); flex-shrink:0; }
.gc-step-btn:hover{ background:#EFE9E0; }
.gc-step-btn:focus-visible{ outline:2px solid var(--gc-rosewood); outline-offset:-2px; }
#gc-cols, #gc-rows{
  width:100%; height:32px; border:none; border-left:1px solid var(--gc-hairline); border-right:1px solid var(--gc-hairline);
  text-align:center; font-size:14px; font-weight:600; color:var(--gc-ink); -moz-appearance:textfield; min-width:0;
}
#gc-cols::-webkit-inner-spin-button, #gc-rows::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#gc-cols:focus-visible, #gc-rows:focus-visible{ outline:none; background:var(--gc-fog); }

/* Tile preview — small thumbnails, scrolls internally rather than pushing page height */
.gc-tile-grid{ display:grid; gap:8px; max-height:260px; overflow-y:auto; padding-right:4px; }
.gc-tile{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--gc-hairline); background:var(--gc-fog); transition: box-shadow 150ms var(--gc-ease); aspect-ratio:3/4; }
.gc-tile:hover{ box-shadow:var(--gc-shadow); }
.gc-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.gc-tile-number{
  position:absolute; top:4px; left:4px; background:rgba(23,24,28,0.75); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:9px;
  font-weight:500; padding:1px 5px; border-radius:100px;
}

/* Download */
.gc-download-btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--gc-ink); color:var(--gc-paper); border:none;
  border-radius:100px; padding:13px 20px; font-size:14px; font-weight:500; cursor:pointer;
  transition: transform 150ms var(--gc-ease), box-shadow 150ms var(--gc-ease);
}
.gc-download-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(168,87,78,0.4); }
.gc-download-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.gc-download-btn:focus-visible{ outline:2px solid var(--gc-rosewood); outline-offset:3px; }

/* Posting order mini grid */
.gc-order-preview{ display:grid; gap:5px; margin-top:12px; }
.gc-order-row{ display:flex; justify-content:center; gap:5px; }
.gc-order-cell{
  width:24px; height:24px; border-radius:6px; background:var(--gc-fog); border:1px solid var(--gc-hairline);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500; color:var(--gc-slate);
}

.gc-reset-link{
  display:block; width:100%; margin-top:12px; background:none; border:none; color:var(--gc-slate); font-size:12px;
  text-decoration:underline; cursor:pointer; padding:6px; text-align:center;
}
.gc-reset-link:hover{ color:var(--gc-rosewood); }

.gc-privacy{ text-align:center; color:var(--gc-slate); font-size:11px; margin-top:20px; }

/* ---------- Responsive: stack below ~900px, sidebar becomes a normal block under the canvas ---------- */
@media (max-width:900px){
  .gc-editor-grid{ grid-template-columns:1fr; gap:24px; }
  .gc-sidebar{ gap:16px; }
  #gc-canvas{ height:auto; width:100%; max-height:60vh; }
  .gc-workspace{ padding:20px; }
  .gc-header{ padding:32px 16px 24px; }
  .gc-tile-grid{ max-height:none; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)) !important; }
}