/* Pulkit Gallery — front-end styles.
 *
 * Two rules shape this file:
 *
 * 1. The palette follows the SURFACE the gallery sits on, not the
 *    browser's colour-scheme preference. A theme with a light page and a
 *    visitor in OS dark mode would otherwise get light text on a light
 *    ground. The script measures the background behind #pg-root and sets
 *    data-pg-scheme; nothing here keys off prefers-color-scheme.
 *
 * 2. Themes style bare h3, strong, input, button, select and code inside
 *    post content, often with high specificity. Properties a theme
 *    commonly clobbers are marked !important here. It is deliberate, not
 *    laziness — this stylesheet has to survive an unknown theme.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

.pg-root{
  --pg-bg:#F3F4F7;
  --pg-surface:#FFFFFF;
  --pg-surface-2:#E9EBF0;
  --pg-tile:#E1E5ED;
  --pg-ink:#141720;
  --pg-ink-2:#434A59;
  --pg-muted:#6E7689;
  --pg-line:#DCDFE7;
  --pg-line-2:#C4C9D6;
  --pg-accent:#0C7C6E;
  --pg-accent-hi:#0A6459;
  --pg-accent-ink:#FFFFFF;
  --pg-accent-soft:#D5EEE8;
  --pg-danger:#B3261E;
  --pg-danger-soft:#FBE4E2;
  --pg-mark:#FFE79A;
  --pg-mark-ink:#3D2E00;
  --pg-shadow-1:0 1px 2px rgba(20,23,32,.07);
  --pg-shadow-2:0 2px 6px rgba(20,23,32,.08), 0 18px 40px -22px rgba(20,23,32,.45);
  --pg-r-s:6px; --pg-r-m:10px; --pg-r-l:16px;
  --pg-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pg-tile-min:224px;

  color:var(--pg-ink);
  font-size:14px;
  line-height:1.5;
  display:block;
}

/* Set by the script when the surface behind the gallery is dark. */
.pg-root[data-pg-scheme="dark"]{
  --pg-bg:#0D0F13;
  --pg-surface:#15181E;
  --pg-surface-2:#1D212A;
  --pg-tile:#1B1F27;
  --pg-ink:#EDF0F5;
  --pg-ink-2:#BFC6D2;
  --pg-muted:#8C95A6;
  --pg-line:#242A34;
  --pg-line-2:#333B48;
  --pg-accent:#3ED8BC;
  --pg-accent-hi:#63E5CD;
  --pg-accent-ink:#04211C;
  --pg-accent-soft:#12332E;
  --pg-danger:#F0887E;
  --pg-danger-soft:#3A1B18;
  --pg-mark:#6A5410;
  --pg-mark-ink:#FFE9A8;
  --pg-shadow-1:0 1px 2px rgba(0,0,0,.55);
  --pg-shadow-2:0 2px 6px rgba(0,0,0,.5), 0 18px 44px -20px rgba(0,0,0,.9);
}

.pg-root *,.pg-root *::before,.pg-root *::after{box-sizing:border-box}
.pg-root button{cursor:pointer}
.pg-root :focus-visible{outline:2px solid var(--pg-accent);outline-offset:2px;border-radius:4px}
.pg-root [hidden]{display:none !important}
.pg-root code{
  font-family:var(--pg-mono) !important;
  background:var(--pg-surface-2) !important;
  color:var(--pg-ink-2) !important;
  padding:1px 5px !important;
  border-radius:4px !important;
  font-size:.92em !important;
  border:0 !important;
}
.pg-root mark{background:var(--pg-mark) !important;color:var(--pg-mark-ink) !important}
@media (prefers-reduced-motion:reduce){
  .pg-root *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Shared control reset — themes style these hard inside post content. */
.pg-root .pg-bar input,
.pg-root .pg-bar select,
.pg-root .pg-bar button,
.pg-root .pg-field input,
.pg-root .pg-lb-foot .pg-btn,
.pg-root .pg-notice button{
  font-family:inherit;
  text-transform:none !important;
  letter-spacing:normal !important;
  box-shadow:none;
  margin:0 !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto;
  height:auto !important;
  line-height:1.35 !important;
  text-decoration:none !important;
}

/* ---------- command bar ----------
   One control surface rather than four boxed widgets: the search and the
   controls share a single rounded shell, separated by a hairline. */
.pg-title{margin:0 0 14px}
.pg-title strong{
  font-size:17px !important;font-weight:700;letter-spacing:-.015em;
  line-height:1.2 !important;color:var(--pg-ink) !important;
}

/* Free-standing pills rather than one bordered box: the search is a soft
   recessed field that lifts to white on focus; the controls are chips. */
.pg-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  margin:0 0 18px;
}
.pg-rule{display:none}

.pg-search{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.pg-search svg{
  position:absolute;left:18px;width:16px;height:16px;
  color:var(--pg-muted);pointer-events:none;z-index:1;
  transition:color .16s;
}
.pg-search:focus-within svg{color:var(--pg-accent)}
.pg-root .pg-search input{
  width:100% !important;height:48px !important;
  background:var(--pg-surface-2) !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  padding:0 74px 0 46px !important;
  font-family:var(--pg-mono) !important;
  font-size:13.5px !important;
  color:var(--pg-ink) !important;
  box-shadow:inset 0 1px 2px rgba(20,23,32,.05) !important;
  -webkit-appearance:none;appearance:none;
  transition:background-color .16s, border-color .16s, box-shadow .16s;
}
.pg-root[data-pg-scheme="dark"] .pg-search input{box-shadow:inset 0 1px 2px rgba(0,0,0,.35) !important}
.pg-root .pg-search input::placeholder{
  color:var(--pg-muted) !important;opacity:1;
  font-family:inherit;font-size:13.5px;letter-spacing:.005em;
}
.pg-root .pg-search input::-webkit-search-cancel-button{display:none}
.pg-root .pg-search input:focus{
  outline:none !important;
  background:var(--pg-surface) !important;
  border-color:var(--pg-accent) !important;
  box-shadow:0 0 0 4px var(--pg-accent-soft), 0 6px 18px -10px rgba(20,23,32,.4) !important;
}

.pg-root .pg-kbd{
  position:absolute;right:16px;z-index:1;pointer-events:none;
  font-family:var(--pg-mono);font-size:10.5px;line-height:1;
  color:var(--pg-muted);background:var(--pg-surface);
  border:1px solid var(--pg-line);
  border-radius:6px;padding:4px 7px;
  box-shadow:0 1px 0 var(--pg-line);
}
.pg-root .pg-clear{
  position:absolute;right:13px;z-index:2;
  width:24px;height:24px;display:grid;place-items:center;
  background:var(--pg-line) !important;border:0 !important;
  color:var(--pg-ink-2) !important;
  padding:0 !important;border-radius:50% !important;font-size:14px !important;
  transition:background .12s,color .12s;
}
.pg-root .pg-clear:hover{color:var(--pg-ink) !important;background:var(--pg-line-2) !important}

.pg-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.pg-root select.pg-ctl{
  height:48px !important;
  background-color:var(--pg-surface-2) !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  padding:0 34px 0 16px !important;
  font-size:13px !important;font-weight:500 !important;
  color:var(--pg-ink-2) !important;
  box-shadow:none !important;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px) !important;
  background-size:5px 5px,5px 5px !important;
  background-repeat:no-repeat !important;
  transition:background-color .14s,color .14s;
}
.pg-root select.pg-ctl:hover{background-color:var(--pg-line) !important;color:var(--pg-ink) !important}

.pg-seg{
  display:flex;background:var(--pg-surface-2);border:0;
  border-radius:999px;padding:4px;gap:2px;flex:0 0 auto;height:48px;align-items:center;
}
.pg-root .pg-seg button{
  background:transparent !important;border:0 !important;
  width:40px !important;height:40px !important;padding:0 !important;
  color:var(--pg-muted) !important;display:grid;place-items:center;
  border-radius:50% !important;transition:background .14s,color .14s;
}
.pg-root .pg-seg button:hover{color:var(--pg-ink-2) !important}
.pg-root .pg-seg button[aria-pressed="true"]{
  background:var(--pg-surface) !important;color:var(--pg-ink) !important;
  box-shadow:0 1px 3px rgba(20,23,32,.16);
}
.pg-root[data-pg-scheme="dark"] .pg-seg button[aria-pressed="true"]{box-shadow:0 1px 3px rgba(0,0,0,.6)}

.pg-root .pg-btn{
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;
  height:48px !important;
  border:1px solid transparent !important;border-radius:999px !important;
  background:var(--pg-accent) !important;color:var(--pg-accent-ink) !important;
  padding:0 20px !important;font-weight:600 !important;font-size:13px !important;
  letter-spacing:.005em !important;
  white-space:nowrap !important;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(12,124,110,.24), 0 8px 18px -10px rgba(12,124,110,.55);
  transition:background .14s,transform .08s,box-shadow .14s;
}
.pg-root .pg-btn:hover{
  background:var(--pg-accent-hi) !important;color:var(--pg-accent-ink) !important;
  box-shadow:0 1px 2px rgba(12,124,110,.28), 0 10px 22px -10px rgba(12,124,110,.7);
}
.pg-root .pg-btn:active{transform:translateY(1px)}
/* Quiet secondary action — a tinted chip, not a filled button. */
.pg-root .pg-btn.ghost{
  background:var(--pg-surface-2) !important;color:var(--pg-ink-2) !important;
  border-color:transparent !important;font-weight:500 !important;
  padding:0 16px !important;box-shadow:none;
}
.pg-root .pg-btn.ghost:hover{background:var(--pg-line) !important;color:var(--pg-ink) !important;box-shadow:none}
.pg-root .pg-btn.danger{background:var(--pg-danger-soft) !important;color:var(--pg-danger) !important;border-color:transparent !important}
.pg-root .pg-btn svg{flex:0 0 auto}
/* Buttons in the lightbox keep a visible edge — no shared shell there. */
.pg-root .pg-lb-foot .pg-btn.ghost{border-color:var(--pg-line-2) !important;background:var(--pg-surface) !important}

/* ---------- notices ---------- */
.pg-notice{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--pg-surface);border:1px solid var(--pg-line);border-left:3px solid var(--pg-accent);
  border-radius:var(--pg-r-m);padding:11px 14px;margin:0 0 16px;
}
.pg-notice p{margin:0 !important;font-size:13px !important;color:var(--pg-ink-2) !important;flex:1 1 240px}
.pg-notice.warn{border-left-color:var(--pg-danger)}
.pg-progress{display:flex;align-items:center;gap:10px;font-family:var(--pg-mono);font-size:11.5px;color:var(--pg-ink-2)}
.pg-spin{width:13px;height:13px;border:2px solid var(--pg-line-2);border-top-color:var(--pg-accent);border-radius:50%;animation:pg-sp .7s linear infinite;flex:0 0 auto}
@keyframes pg-sp{to{transform:rotate(360deg)}}

/* ---------- grid ---------- */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--pg-tile-min),1fr));gap:9px;margin:0;padding:0;list-style:none}
.pg-root .pg-card{
  position:relative;background:var(--pg-tile) !important;border:0 !important;
  border-radius:14px !important;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,23,32,.10), 0 10px 24px -18px rgba(20,23,32,.5);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
  display:block;text-align:left;padding:0 !important;width:100% !important;
  margin:0 !important;height:auto !important;
  -webkit-tap-highlight-color:transparent;
}
.pg-root .pg-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(20,23,32,.10), 0 18px 34px -18px rgba(20,23,32,.55);
}
.pg-root[data-pg-scheme="dark"] .pg-card{box-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.9)}
.pg-thumb{aspect-ratio:4/3;background:var(--pg-tile);position:relative;overflow:hidden;max-width:100%}
.pg-root .pg-thumb img{
  width:100% !important;height:100% !important;object-fit:cover;display:block;
  margin:0 !important;border-radius:0 !important;max-width:none !important;box-shadow:none !important;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.pg-root .pg-card:hover .pg-thumb img{transform:scale(1.045)}

/* Caption over the photo, under a scrim — no white strip below the tile. */
.pg-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 12px 11px;text-align:left;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,8,12,.88) 0%, rgba(6,8,12,.66) 38%, rgba(6,8,12,.24) 70%, transparent 100%);
}
.pg-name{
  font-family:var(--pg-mono);font-size:11.5px;font-weight:500;
  line-height:1.4;letter-spacing:.01em;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.pg-name mark{
  background:var(--pg-mark) !important;color:var(--pg-mark-ink) !important;
  border-radius:3px;padding:0 2px;text-shadow:none;
}
.pg-sub{
  font-family:var(--pg-mono);font-size:9.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.66);margin-top:5px;font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(4px);
  transition:opacity .22s ease,transform .22s ease;
}
.pg-card:hover .pg-sub{opacity:1;transform:none}
@media (hover:none){ .pg-sub{opacity:1;transform:none} }

.pg-root .pg-drop{
  border:1.5px dashed var(--pg-line-2) !important;border-radius:var(--pg-r-l) !important;
  background:var(--pg-surface) !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:4/3;min-height:0;color:var(--pg-muted) !important;padding:20px !important;text-align:center;
  transition:border-color .14s,color .14s,background .14s;margin:0 !important;
}
.pg-root .pg-drop:hover{border-color:var(--pg-accent) !important;color:var(--pg-accent) !important;background:var(--pg-accent-soft) !important}
.pg-drop b{font-size:15px;color:var(--pg-ink);font-weight:600}
.pg-root .pg-drop:hover b{color:var(--pg-accent-hi)}
.pg-drop small{font-size:11.5px;max-width:22ch;line-height:1.4}

.pg-empty{text-align:center;padding:44px 20px;color:var(--pg-muted);border:1px dashed var(--pg-line-2);border-radius:var(--pg-r-l)}
.pg-root .pg-empty h3{
  font-size:17px !important;color:var(--pg-ink) !important;margin:0 0 6px !important;
  font-weight:600 !important;line-height:1.3 !important;letter-spacing:normal !important;text-transform:none !important;
}
.pg-root .pg-empty p{margin:0 !important;font-size:13px !important;color:var(--pg-muted) !important;max-width:56ch;margin-inline:auto !important}

/* ---------- pager ---------- */
.pg-pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px;
}
.pg-range{
  font-family:var(--pg-mono);font-size:11.5px;color:var(--pg-muted);
  font-variant-numeric:tabular-nums;
}
.pg-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg-root .pg-page{
  min-width:34px !important;height:34px !important;padding:0 9px !important;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pg-surface) !important;color:var(--pg-ink-2) !important;
  border:1px solid var(--pg-line) !important;border-radius:var(--pg-r-s) !important;
  font-family:var(--pg-mono) !important;font-size:12px !important;font-weight:400 !important;
  font-variant-numeric:tabular-nums;line-height:1 !important;
  text-transform:none !important;letter-spacing:normal !important;margin:0 !important;
  transition:background .12s,border-color .12s,color .12s;
}
.pg-root .pg-page:hover:not(:disabled){background:var(--pg-surface-2) !important;color:var(--pg-ink) !important;border-color:var(--pg-line-2) !important}
.pg-root .pg-page[aria-current="page"]{
  background:var(--pg-accent) !important;color:var(--pg-accent-ink) !important;
  border-color:var(--pg-accent) !important;font-weight:600 !important;
}
.pg-root .pg-page:disabled{opacity:.35;cursor:default}
.pg-root .pg-page.step{font-size:15px !important}
.pg-gap{color:var(--pg-muted);font-family:var(--pg-mono);font-size:12px;padding:0 2px}

@media (max-width:560px){
  .pg-pager{justify-content:center}
  .pg-range{width:100%;text-align:center;order:2}
}

.pg-foot{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  border-top:1px solid var(--pg-line);margin-top:24px;padding-top:13px;
  font-family:var(--pg-mono);font-size:11px;color:var(--pg-muted);font-variant-numeric:tabular-nums;
}

/* ---------- lightbox ---------- */
.pg-overlay{
  position:fixed;inset:0;z-index:99999;background:rgba(8,10,14,.84);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.pg-lb{
  background:var(--pg-surface);border:1px solid var(--pg-line);border-radius:var(--pg-r-l);
  box-shadow:var(--pg-shadow-2);width:min(1100px,100%);max-height:calc(100vh - 40px);
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);overflow:hidden;
}
.pg-lb-img{background:var(--pg-tile);display:grid;place-items:center;position:relative;min-height:240px;overflow:hidden}
.pg-root .pg-lb-img img{max-width:100% !important;max-height:calc(100vh - 40px);object-fit:contain;display:block;margin:0 !important;border-radius:0 !important}
.pg-root .pg-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:34px !important;height:34px !important;
  border-radius:50% !important;background:rgba(10,12,16,.6) !important;color:#fff !important;
  border:0 !important;display:grid;place-items:center;font-size:17px !important;padding:0 !important;
}
.pg-root .pg-nav:hover{background:rgba(10,12,16,.88) !important}
.pg-nav.prev{left:10px} .pg-nav.next{right:10px}
.pg-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--pg-line)}
.pg-head{padding:14px 16px;border-bottom:1px solid var(--pg-line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.pg-head span{font-family:var(--pg-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted)}
.pg-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;flex:1}
.pg-root .pg-field label{
  display:block;font-family:var(--pg-mono);font-size:10px !important;letter-spacing:.1em !important;
  text-transform:uppercase !important;color:var(--pg-muted) !important;margin:0 0 6px !important;font-weight:400 !important;
}
.pg-root .pg-field input[type=text]{
  width:100% !important;background:var(--pg-bg) !important;border:1px solid var(--pg-line-2) !important;
  border-radius:var(--pg-r-s) !important;padding:9px 10px !important;
  font-family:var(--pg-mono) !important;font-size:12px !important;color:var(--pg-ink) !important;
  -webkit-appearance:none;appearance:none;box-shadow:none;
}
.pg-root .pg-field input[type=text]:focus{outline:none;border-color:var(--pg-accent) !important;box-shadow:0 0 0 3px var(--pg-accent-soft)}
.pg-root .pg-hint{font-size:11px !important;color:var(--pg-muted) !important;margin:6px 0 0 !important;line-height:1.45}
.pg-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.pg-chip{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--pg-mono);font-size:11px;
  background:var(--pg-accent-soft);color:var(--pg-accent-hi);border-radius:5px;padding:3px 4px 3px 7px;
}
.pg-root[data-pg-scheme="dark"] .pg-chip{color:var(--pg-accent)}
.pg-chip i{cursor:pointer;opacity:.6;font-style:normal;padding:0 2px}
.pg-chip i:hover{opacity:1}
.pg-kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-family:var(--pg-mono);font-size:11px;margin:0}
.pg-root .pg-kv dt{color:var(--pg-muted) !important;margin:0 !important}
.pg-root .pg-kv dd{margin:0 !important;color:var(--pg-ink-2) !important;word-break:break-all}
.pg-lb-foot{padding:12px 16px;border-top:1px solid var(--pg-line);display:flex;gap:8px;flex-wrap:wrap}
.pg-root .pg-lb-foot .pg-btn{padding:8px 13px !important;font-size:12px !important}

@media (max-width:820px){
  .pg-lb{grid-template-columns:1fr;max-height:calc(100vh - 32px)}
  .pg-lb-img{max-height:36vh}
  .pg-root .pg-lb-img img{max-height:36vh}
  .pg-side{border-left:0;border-top:1px solid var(--pg-line)}
}
@media (max-width:720px){
  .pg-bar{flex-wrap:wrap}
  .pg-search{flex:1 1 100%;order:1}
  .pg-tools{flex:1 1 100%;order:2;justify-content:space-between}
}
@media (max-width:560px){
  .pg-root{--pg-tile-min:150px}
  .pg-grid{gap:7px}
  .pg-title strong{font-size:16px !important}
  .pg-root .pg-search input{height:44px !important;padding-right:52px !important}
  .pg-root .pg-kbd{display:none}
  .pg-root select.pg-ctl,.pg-seg,.pg-root .pg-btn{height:44px !important}
  .pg-root .pg-seg button{width:36px !important;height:36px !important}
  .pg-root .pg-btn{padding:0 15px !important}
}

/* drag overlay + toasts */
.pg-dragging{
  position:fixed;inset:0;z-index:99998;background:rgba(8,10,14,.78);
  display:grid;place-items:center;pointer-events:none;
}
.pg-dragging div{
  background:#fff;border:2px dashed #0C7C6E;border-radius:16px;
  padding:26px 40px;font-weight:600;font-size:17px;color:#141720;
}
.pg-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:100000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.pg-toast{
  background:#141720;color:#fff;border-radius:999px;padding:10px 18px;font-size:12.5px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.8);max-width:min(92vw,520px);text-align:center;
  font-family:system-ui,-apple-system,sans-serif;
}
.pg-toast.bad{background:#B3261E}