/*
 * Everything visual resolves from the theme's own custom properties, with a
 * literal fallback so the plugin still looks deliberate on a theme that does
 * not define them. Translucent scrims are derived with color-mix() from the
 * theme ink/surface, each preceded by a plain rgba() for older browsers.
 */

     /* Declared on :root, not on the components, so they can actually be overridden.
   A declaration on .sil-bar would beat any :root override a theme sets, which
   would make the whole thing unstyleable without !important. To retheme, set
   the same names anywhere more specific — body{--sil-accent:#c00} works. */
:root{
 --sil-ink:var(--wp--preset--color--contrast,#191919);
 --sil-surface:var(--wp--preset--color--accent-1,#fff);
 --sil-muted:var(--wp--preset--color--accent-4,#5f5f5f);
 --sil-line:var(--wp--preset--color--accent-6,rgba(25,25,25,.2));
 --sil-tint:var(--wp--preset--color--accent-5,#f1eee9);
 --sil-accent:var(--wp--preset--color--accent-2,#f5b684);
 --sil-well:var(--wp--preset--color--base,#f8f7f5);
 --sil-body:var(--wp--preset--font-family--body,Georgia,serif);
 --sil-head:var(--wp--preset--font-family--heading,Georgia,serif);
 --sil-warn:#8a5a33;
 --sil-warn:color-mix(in srgb,var(--sil-accent) 52%,var(--sil-ink));
}

/* Justified Image Grid gives its PhotoSwipe container z-index:150000, so these
   have to sit above that or they are placed correctly and painted over. */
.sil-bar{position:fixed;z-index:150100;display:none;align-items:stretch;
 border-radius:999px;overflow:hidden;
 background:rgba(25,25,25,.66);
 background:color-mix(in srgb,var(--sil-ink) 66%,transparent);
 -webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
 box-shadow:0 2px 16px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.16);
 animation:sil-rise .18s ease both}
.sil-bar button{display:inline-flex;align-items:center;gap:.45em;margin:0;border:0;
 padding:0 1em;height:40px;background:none;color:var(--sil-surface);cursor:pointer;
 white-space:nowrap;font-family:var(--sil-body);
 font-size:var(--wp--preset--font-size--normal,16px);line-height:1;letter-spacing:.01em;
 transition:background .14s ease,color .14s ease}
.sil-bar button:hover{background:rgba(255,255,255,.13);
 background:color-mix(in srgb,var(--sil-surface) 14%,transparent)}
.sil-bar button:focus-visible{outline:2px solid var(--sil-accent);outline-offset:-4px}
.sil-bar svg{flex:0 0 auto;display:block}
.sil-sep{width:1px;flex:0 0 auto;margin:9px 0;background:rgba(255,255,255,.24);
 background:color-mix(in srgb,var(--sil-surface) 26%,transparent)}
.sil-fav.is-on{color:var(--sil-accent);cursor:default}
.sil-fav.is-on svg path{fill:currentColor}
.sil-fav.is-on:hover{background:none}
.sil-pop{animation:sil-pop .5s cubic-bezier(.34,1.56,.64,1)}
/* Narrow thumbnails: icons only, labels kept for screen readers. */
.sil-bar.is-compact button{padding:0 .8em}
.sil-bar.is-compact .sil-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes sil-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes sil-pop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

.sil-toast{position:fixed;z-index:150300;display:flex;align-items:center;gap:.5em;
 padding:.62em 1em;border-radius:999px;color:var(--sil-surface);
 background:rgba(25,25,25,.9);
 background:color-mix(in srgb,var(--sil-ink) 90%,transparent);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 font-family:var(--sil-body);font-size:var(--wp--preset--font-size--normal,16px);line-height:1;
 white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.28);pointer-events:none;
 animation:sil-rise .18s ease both}

.sil-panel{position:fixed;z-index:150200;width:330px;max-width:calc(100vw - 24px);
 box-sizing:border-box;padding:var(--wp--preset--spacing--20,1.25rem);
 border-radius:5px;background:var(--sil-surface);color:var(--sil-ink);
 box-shadow:0 12px 44px rgba(25,25,25,.2),0 1px 4px rgba(25,25,25,.12);
 font-family:var(--sil-body);font-size:var(--wp--preset--font-size--medium,17px);line-height:1.45}
.sil-title{margin:0 0 .15em;font-family:var(--sil-head);font-weight:700;
 font-size:var(--wp--preset--font-size--large,21px);line-height:1.2;color:var(--sil-ink)}
.sil-caption{margin:0 0 .9em;font-size:var(--wp--preset--font-size--small,15px);
 font-style:italic;color:var(--sil-muted);opacity:.85;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sil-field{display:block;margin:0 0 .65em}
.sil-field .sil-txt{display:block;margin:0 0 .25em;
 font-size:var(--wp--preset--font-size--small,.875rem);color:var(--sil-muted)}
.sil-panel textarea,.sil-panel input,.sil-page textarea,.sil-page input{display:block;
 width:100%;box-sizing:border-box;margin:0;padding:.55em .65em;
 border:1px solid var(--sil-line);border-radius:3px;
 background:var(--sil-well);color:var(--sil-ink);font-family:inherit;
 font-size:var(--wp--preset--font-size--medium,17px);line-height:1.4}
.sil-panel textarea,.sil-page textarea{min-height:4.4em;resize:vertical}
.sil-panel textarea::placeholder,.sil-panel input::placeholder,
.sil-page textarea::placeholder,.sil-page input::placeholder{color:var(--sil-muted);
 opacity:.62;font-style:italic}
.sil-panel textarea:focus,.sil-panel input:focus,
.sil-page textarea:focus,.sil-page input:focus{outline:0;background:var(--sil-surface);
 border-color:var(--sil-ink);
 box-shadow:0 0 0 3px rgba(245,182,132,.45);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--sil-accent) 48%,transparent)}
.sil-panel .sil-invalid,.sil-page .sil-invalid{border-color:var(--sil-warn);
 background:var(--sil-tint)}
.sil-privacy{margin:.8em 0 0;font-size:var(--wp--preset--font-size--small,.875rem);
 line-height:1.4;color:var(--sil-muted);opacity:.8}
/* Reserved height so clearing the hint never shifts the buttons. */
.sil-hint{margin:.6em 0 0;min-height:1.4em;line-height:1.4;
 font-size:var(--wp--preset--font-size--small,.875rem);color:var(--sil-warn)}
.sil-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5em;margin-top:.8em}
.sil-actions button{border:0;border-radius:3px;padding:.5em 1.1em;cursor:pointer;
 font-family:var(--sil-body);font-size:var(--wp--preset--font-size--normal,16px);
 line-height:1.2;letter-spacing:.01em}
.sil-actions button:focus-visible{outline:2px solid var(--sil-ink);outline-offset:2px}
.sil-cancel{background:none;color:var(--sil-muted)}
.sil-cancel:hover{background:var(--sil-tint);color:var(--sil-ink)}
.sil-send{background:var(--sil-ink);color:var(--sil-surface)}
.sil-send:hover{filter:brightness(1.35)}
.sil-send:disabled{background:var(--sil-tint);color:var(--sil-muted);opacity:.7;
 cursor:default;filter:none}

/* The standing tray. Bottom-LEFT deliberately: wpfront-scroll-top owns the
   bottom-right corner on this site. z-index sits below PhotoSwipe (150000) so
   an open lightbox covers it instead of the tray floating over a photo. */
.sil-tray{position:fixed;z-index:149000;display:none;align-items:center;gap:.45em;
 left:var(--wp--preset--spacing--20,1.25rem);bottom:var(--wp--preset--spacing--20,1.25rem);
 margin:0;border:0;padding:0 1.1em;height:44px;border-radius:999px;cursor:pointer;
 color:var(--sil-surface);
 background:rgba(25,25,25,.9);
 background:color-mix(in srgb,var(--sil-ink) 90%,transparent);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 font-family:var(--sil-body);font-size:var(--wp--preset--font-size--normal,16px);line-height:1;
 box-shadow:0 3px 18px rgba(0,0,0,.26);transition:filter .14s ease;
 animation:sil-rise .18s ease both}
.sil-tray.is-shown{display:inline-flex}
.sil-tray:hover{filter:brightness(1.4)}
.sil-tray:focus-visible{outline:2px solid var(--sil-accent);outline-offset:3px}
.sil-tray svg{flex:0 0 auto;display:block}

.sil-panel.is-list{width:390px}
.sil-items{margin:.7em 0 0;padding:0;list-style:none;max-height:44vh;overflow-y:auto}
.sil-items li{display:flex;align-items:center;gap:.7em;padding:.5em 0;
 border-top:1px solid var(--sil-line)}
.sil-items li:first-child{border-top:0}
.sil-items img{flex:0 0 auto;width:58px;height:44px;object-fit:cover;border-radius:2px;
 background:var(--sil-tint)}
.sil-items p{flex:1 1 auto;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:var(--wp--preset--font-size--small,.875rem);line-height:1.3}
.sil-del{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--sil-muted);
 padding:.35em .45em;border-radius:3px;line-height:0}
.sil-del:hover{background:var(--sil-tint);color:var(--sil-ink)}
.sil-del:focus-visible{outline:2px solid var(--sil-ink);outline-offset:1px}
.sil-empty{margin:.9em 0 .2em;color:var(--sil-muted);font-style:italic}
.sil-clear{margin-right:auto}

/* The [saved_photos] page. Inherits the content width of its wrapper, so it
   sits in the page like any other block. */
.sil-page{font-family:var(--sil-body);color:var(--sil-ink)}
.sil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:var(--wp--preset--spacing--20,1.25rem);margin:0 0 var(--wp--preset--spacing--40,2.5rem);
 padding:0;list-style:none}
.sil-grid li{position:relative;margin:0}
.sil-grid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;
 background:var(--sil-tint)}
.sil-grid p{margin:.45em 0 0;line-height:1.3;
 font-size:var(--wp--preset--font-size--small,.875rem);color:var(--sil-muted);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sil-grid .sil-del{position:absolute;top:7px;right:7px;padding:.4em;border-radius:999px;
 color:var(--sil-surface);
 background:rgba(25,25,25,.7);
 background:color-mix(in srgb,var(--sil-ink) 70%,transparent);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sil-grid .sil-del:hover{background:var(--sil-ink);color:var(--sil-surface)}
.sil-formwrap{max-width:32rem}
.sil-page .sil-actions{justify-content:flex-start}
.sil-page .sil-title{margin-bottom:.5em}
.sil-back{display:inline-block;margin:.6em 0 0}

/* Touch screens report hover:none, where a :hover style sticks after a tap and
   reads as a jammed button. Neutralise them rather than restyling everything. */
@media (hover:none){
 .sil-bar button:hover{background:none}
 .sil-tray:hover{filter:none}
 .sil-send:hover{filter:none}
 .sil-cancel:hover{background:none;color:var(--sil-muted)}
 .sil-del:hover,.sil-grid .sil-del:hover{background:none;color:var(--sil-muted)}
 .sil-grid .sil-del:hover{color:var(--sil-surface)}
}
/* Coarse pointers need a 44px target; 40 was under the mark. */
@media (pointer:coarse){
 .sil-bar button{height:44px}
 .sil-tray{height:48px}
 .sil-del{padding:.55em}
}
/* Narrow screens: the form becomes a bottom sheet, so an on-screen keyboard
   cannot shove a small fixed popover out of view. */
@media (max-width:600px){
 .sil-panel.is-sheet{left:8px;right:8px;bottom:8px;top:auto;width:auto;max-width:none;
  max-height:82vh;overflow-y:auto}
}

@media (prefers-reduced-motion:reduce){
 .sil-bar,.sil-toast,.sil-tray,.sil-pop{animation:none}
 .sil-bar button,.sil-tray{transition:none}
}