/* ==========================================================================
   CONTROL TOWER GALLERY  —  SLB-branded stylesheet
   Palette and type follow context.md (SLB brand): white-dominant, SLB Blue
   accents, SLB Sans typeface (Arial fallback).
   ========================================================================== */

/* ---- SLB Sans font loading (from static/fonts) ------------------------- */
@font-face {
  font-family: "SLB Sans";
  src: url("../fonts/SLBSans-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SLB Sans";
  src: url("../fonts/SLBSans-Book.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SLB Sans";
  src: url("../fonts/SLBSans-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SLB Sans";
  src: url("../fonts/SLBSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Design tokens (brand colors) -------------------------------------- */
:root {
  --slb-blue:   #0014DC;
  --slb-deep:   #051464;
  --slb-aqua:   #00D2DC;
  --frost-1:    #6E8CC8;
  --frost-2:    #AFBEE1;

  --white:      #FFFFFF;
  --grey-1:     #F0F0F0;
  --grey-2:     #DCE1E1;
  --grey-3:     #C8CDCD;
  --grey-4:     #AAAAAA;
  --grey-5:     #696969;
  --black:      #000000;

  --header-bg:  #051464;       /* dark navy header (SLB Deep Blue) */
  --page-bg:    #F4F5FA;       /* very light blue-grey canvas */
  --text:       #0a0f3c;
  --muted:      #696969;

  --radius:     14px;
  --radius-sm:  8px;
  --shadow:     0 2px 10px rgba(5, 20, 100, 0.08);
  --shadow-hov: 0 8px 24px rgba(5, 20, 100, 0.16);
  --maxw:       1320px;
  --font: "SLB Sans", Arial, "Segoe UI", sans-serif;
}

/* ---- Base -------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
a { color: var(--slb-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { color: var(--slb-deep); margin: 0 0 .4em; font-weight: 500; }
h1 { font-size: 2rem; font-weight: 300; }
h2 { font-size: 1.4rem; }

/* ==========================================================================
   HEADER  (two rows: brand strip + menu bar)
   ========================================================================== */
.topbar {
  background: var(--header-bg);
  color: var(--white);
}
.topbar a { color: var(--white); }
.topbar__strip,
.topbar__menu {
  display: flex; align-items: center; gap: 18px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.topbar__strip { height: 46px; }
.topbar__brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 1rem; color: var(--white); text-decoration: none;
}
.topbar__brand img { height: 20px; width: auto; }
.topbar__brand .divider { width: 1px; height: 22px; background: rgba(255,255,255,.3); }
.topbar__spacer { flex: 1; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border-radius: 20px;
  padding: 6px 14px; width: 175px; max-width: 36vw;
}
.search--wide { width: 215px; }   /* fits "Search in Storefront" */
.search input {
  border: 0; outline: 0; width: 100%; font-family: var(--font);
  font-size: .9rem; color: var(--text); background: transparent;
}
.search svg { width: 16px; height: 16px; fill: var(--grey-5); flex: none; }

.avatar-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  display: grid; place-items: center; color: var(--white);
}

/* ---- menu bar ---- */
.topbar__menu {
  height: 44px; gap: 8px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.menu { position: relative; }
.menu > button {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--white);
  font-family: var(--font); font-size: .95rem; font-weight: 500;
  padding: 10px 14px; cursor: pointer; border-radius: 6px;
}
.menu > button:hover { background: rgba(255,255,255,.1); }
.menu > button .caret { width: 10px; height: 10px; fill: currentColor; }
.menu__icon { width: 18px; height: 18px; }

/* dropdown panels */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white); color: var(--text);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-hov);
  padding: 18px 22px; min-width: 280px; z-index: 50;
  display: none;
}
.menu:hover .dropdown,
.menu:focus-within .dropdown { display: block; }
.dropdown.dropdown--wide { min-width: 560px; }
.dropdown h4 {
  font-size: .8rem; text-transform: none; color: var(--slb-deep);
  border-bottom: 1px solid var(--grey-2); padding-bottom: 6px; margin: 0 0 8px;
}
.dropdown__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.dropdown a {
  display: block; color: var(--text); padding: 7px 4px;
  border-radius: 6px; font-size: .92rem;
}
.dropdown a:hover { background: var(--grey-1); text-decoration: none; color: var(--slb-blue); }

/* ==========================================================================
   HERO
   ========================================================================== */
/* The carousel: every slide shares ONE fixed grid so nothing shifts between
   slides. Left = text column with reserved rows; right = fixed media box. */
:root { --hero-h: 360px; --hero-media-w: 460px; --hero-media-h: 280px; }

.hero {
  position: relative;
  background: linear-gradient(120deg, #e9ecfb 0%, #dfe6fb 60%, #cfe8f4 100%);
  border-bottom: 1px solid var(--grey-2);
  overflow: hidden;
}
.hero__viewport { max-width: var(--maxw); margin: 0 auto; }

/* only the active slide shows; all slides are identical in size */
.hero__slide { display: none; }
.hero__slide.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-media-w);
  gap: 48px; align-items: center;
  height: var(--hero-h); padding: 0 76px;
  animation: heroFade .35s ease;
}
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- text column: fixed rows so the title/desc/button never move ---- */
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; min-width: 0;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  height: 28px; box-sizing: border-box;
  font-size: .78rem; font-weight: 500; color: var(--slb-blue);
  background: rgba(255,255,255,.7); border-radius: 14px; padding: 0 12px; margin-bottom: 14px;
}
.hero__eyebrow img { width: 16px; height: 16px; }

.hero__text h1 {
  color: var(--slb-deep); font-size: 2.1rem; line-height: 1.15; font-weight: 700;
  margin: 0 0 10px; min-height: 2.3em;            /* room for up to 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__desc {
  color: var(--slb-deep); font-size: 1.02rem; line-height: 1.4;
  margin: 0; min-height: 2.8em;                    /* up to 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__contains {
  font-size: .85rem !important; line-height: 1.3; margin: 10px 0 0; min-height: 1.3em;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__text .btn-primary { margin-top: 18px; align-self: flex-start; }

/* ---- media column: a fixed box; both the photo and the feature fill it ---- */
.hero__art {
  width: var(--hero-media-w); height: var(--hero-media-h);
  justify-self: end; align-self: center;
}
.hero__art > img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-hov);
}
.hero__feature {
  width: 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  color: var(--white); text-decoration: none;
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-hov);
  background: linear-gradient(160deg, var(--c-start), var(--c-end));
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s ease;
}
.hero__feature:hover { transform: translateY(-3px); text-decoration: none; color: var(--white); }
.hero__feature-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.hero__feature-title {
  font-size: 1.35rem; font-weight: 500; line-height: 1.2; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__feature-meta { font-size: .82rem; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }
.hero__feature-meta svg { width: 14px; height: 14px; fill: currentColor; }
.hero__feature-desc {
  font-size: .88rem; opacity: .9; margin-top: auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- nav arrows + dots: fixed because slide height is constant ---- */
.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; z-index: 5;
  background: rgba(255,255,255,.85); box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.hero__nav:hover { background: var(--white); }
.hero__nav svg { width: 22px; height: 22px; fill: var(--slb-deep); }
.hero__nav.prev { left: 16px; }
.hero__nav.next { right: 16px; }

.hero__dots {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; gap: 8px; justify-content: center;
}
.hero__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-3); cursor: pointer; transition: width .2s; }
.hero__dots span.active { background: var(--slb-blue); width: 22px; border-radius: 5px; }

/* ---- responsive: stack into a single centered column ---- */
@media (max-width: 820px) {
  :root { --hero-h: auto; }
  .hero__slide.active {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    padding: 32px 48px 48px; gap: 24px;
  }
  .hero__text { height: auto; align-items: center; }
  .hero__eyebrow, .hero__text .btn-primary { align-self: center; }
  .hero__text h1, .hero__desc, .hero__contains { min-height: 0; }
  .hero__art { width: min(86vw, 460px); height: 220px; justify-self: center; }
}

/* ==========================================================================
   SECTIONS / shared
   ========================================================================== */
.section { padding: 32px 0; }
.section__head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
}
.section__head h2 { margin: 0; }
.section__head .spacer { flex: 1; }
.viewall { font-weight: 500; }

/* card / list view toggle (segmented icon control) */
.viewtoggle {
  display: inline-flex; border: 1px solid var(--grey-2); border-radius: 8px;
  overflow: hidden; background: var(--white);
}
.viewtoggle button {
  border: 0; background: var(--white); cursor: pointer;
  padding: 7px 10px; display: grid; place-items: center; color: var(--grey-5);
}
.viewtoggle button + button { border-left: 1px solid var(--grey-2); }
.viewtoggle button.active { background: var(--slb-blue); color: var(--white); }
.viewtoggle svg { width: 18px; height: 18px; fill: currentColor; }

/* pill tabs */
.tabs { display: inline-flex; background: var(--white); border: 1px solid var(--grey-2);
  border-radius: 22px; padding: 3px; gap: 2px; }
.tabs button {
  border: 0; background: transparent; font-family: var(--font); font-weight: 500;
  font-size: .9rem; color: var(--muted); padding: 6px 16px; border-radius: 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tabs button.active { background: var(--slb-blue); color: var(--white); }

/* ==========================================================================
   DASHBOARD CARD  (rich gradient tile)
   ========================================================================== */
.card-carousel { position: relative; }
.card-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

/* left/right scroll arrows for a horizontal card row.
   Positioned to line up with the hero arrows: 16px from the viewport edges.
   calc(50% - 50vw + 16px) reaches the screen edge from inside the centered
   content column (matches .hero__nav left/right: 16px). */
.row-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; z-index: 4;
  background: rgba(255, 255, 255, .85); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: opacity .15s;
}
.row-nav:hover { background: #fff; }
.row-nav svg { width: 22px; height: 22px; fill: var(--slb-deep); }
.row-nav.prev { left: calc(50% - 50vw + 16px); }
.row-nav.next { right: calc(50% - 50vw + 16px); }
.row-nav[disabled] { opacity: 0; pointer-events: none; }
.card-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.dcard {
  position: relative; scroll-snap-align: start;
  min-width: 300px; color: var(--white);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); text-decoration: none;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--c-start, #0014DC), var(--c-end, #051464));
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-row .dcard { flex: 0 0 320px; }
.dcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hov); text-decoration: none; }
.dcard__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dcard__top { display: flex; align-items: center; gap: 10px; }
.pill {
  background: rgba(255,255,255,.22); color: var(--white);
  font-size: .72rem; font-weight: 500; padding: 4px 10px; border-radius: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.dcard__stats { margin-left: auto; display: flex; gap: 12px; font-size: .78rem; opacity: .92; }
.dcard__stats span { display: inline-flex; align-items: center; gap: 4px; }
.dcard__stats svg { width: 14px; height: 14px; fill: currentColor; }
.dcard h3 { color: var(--white); font-weight: 500; font-size: 1.12rem; margin: 4px 0 0; }
.dcard p { font-size: .85rem; opacity: .9; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dcard__owner { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .8rem; }
.dcard__owner .ava {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex: none;
}
.dcard__owner .label { opacity: .75; font-size: .68rem; display: block; }
.dcard__actions {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; background: rgba(0,0,0,.16);
}
.dcard__actions .spacer { flex: 1; }
.iconbtn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: var(--white);
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
}
.iconbtn:hover { background: rgba(255,255,255,.28); text-decoration: none; }
.iconbtn svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   STOREFRONT CARDS (homepage section 3)
   ========================================================================== */
.sf-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.sfcard {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
}
.sfcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hov); text-decoration: none; }
.sfcard__banner {
  height: 64px; background: linear-gradient(120deg, var(--c-start), var(--c-end));
  display: flex; align-items: center; justify-content: center;
}
.sfcard__banner img { height: 26px; width: 26px; }
.sfcard__body { padding: 16px; text-align: center; }
.sfcard__body h3 {
  font-size: 1.02rem; line-height: 1.3; margin: 0 0 10px; color: var(--slb-deep);
  min-height: 2.6em;                    /* room for up to 2 lines, uniform across cards */
  display: flex; align-items: center; justify-content: center;  /* center the name in that space */
}
.sfcard__body h3 span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sfcard__owner { display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.sfcard__owner .ava { width: 24px; height: 24px; border-radius: 50%; background: var(--frost-2);
  color: var(--slb-deep); display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.sfcard__count { color: var(--slb-blue); font-weight: 500; font-size: .92rem; }

/* ==========================================================================
   DISCOVER LIST (rows)
   ========================================================================== */
.discover-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 252px;            /* ~3.5 compact rows; the rest scroll */
  overflow-y: auto; padding-right: 6px;
}
.discover-list::-webkit-scrollbar { width: 8px; }
.discover-list::-webkit-scrollbar-thumb { background: var(--grey-3); border-radius: 4px; }
.drow {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--grey-2); border-radius: 9px;
  padding: 9px 20px; color: var(--text);
  transition: box-shadow .15s, border-color .15s;
}
.drow:hover { box-shadow: var(--shadow); border-color: var(--frost-1); }
.drow__link { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; }
.drow__link:hover { text-decoration: none; }
.drow__icon { width: 34px; height: 34px; border-radius: 50%; flex: none; font-size: .8rem;
  display: grid; place-items: center; color: var(--white); font-weight: 700;
  background: linear-gradient(160deg, var(--c-start), var(--c-end)); }
.drow__main { flex: 1; min-width: 0; }
.drow__meta { font-size: .7rem; color: var(--muted); display: flex; gap: 12px; margin-bottom: 3px; line-height: 1.3; }
.drow__meta svg { width: 12px; height: 12px; fill: currentColor; vertical-align: -2px; }
.drow__main h3 { font-size: .9rem; margin: 0 0 2px; line-height: 1.25; color: var(--slb-deep); }
.drow__main p { margin: 0; font-size: .78rem; line-height: 1.3; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.drow__owner { display: flex; align-items: center; gap: 8px; font-size: .82rem; width: 175px; flex: none; }
.drow__owner .ava { width: 26px; height: 26px; border-radius: 50%; background: var(--frost-2);
  color: var(--slb-deep); display: grid; place-items: center; font-weight: 700; font-size: .68rem; flex: none; }
.drow__owner .label { display: block; color: var(--muted); font-size: .68rem; }
.drow__actions { display: flex; gap: 8px; flex: none; }
.drow__actions .iconbtn { border-color: var(--grey-2); background: var(--white); color: var(--slb-deep); }
.drow__actions .iconbtn:hover { background: var(--grey-1); }

@media (max-width: 1040px) { .drow__owner--app { display: none; } }  /* hide Application Owner first */
@media (max-width: 860px) { .drow__owner { display: none; } }

/* ==========================================================================
   STOREFRONT PAGE
   ========================================================================== */
.subbar { background: var(--white); border-bottom: 1px solid var(--grey-2); }
.subbar .container { display: flex; align-items: center; gap: 12px; height: 44px; }
.backlink { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

.page-head { padding: 26px 0 6px; }
.page-head h1 { display: flex; align-items: center; gap: 14px; }
.page-head .head-icon { width: 40px; height: 40px; }

.tabbar { display: flex; gap: 22px; border-bottom: 1px solid var(--grey-2); margin-bottom: 22px; }
.tabbar a {
  padding: 12px 2px; color: var(--muted); font-weight: 500; border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tabbar a.active { color: var(--slb-blue); border-bottom-color: var(--slb-blue); }
.tabbar a:hover { text-decoration: none; color: var(--slb-deep); }

.layout-2col { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.sidebar { background: var(--white); border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 16px; }
.sidebar h4 { font-size: .8rem; color: var(--muted); margin: 0 0 10px; }
.sidebar .taglist { display: flex; flex-direction: column; gap: 4px; }
.sidebar .taglist a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  color: var(--text); font-size: .88rem; }
.sidebar .taglist a:hover { background: var(--grey-1); text-decoration: none; }
.sidebar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slb-blue); flex: none; }

/* Related Tags as clickable chips (slicer-style) */
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tagchip {
  border: 0; cursor: pointer; font-family: var(--font); font-size: .82rem; line-height: 1.2;
  background: var(--grey-1); color: var(--slb-deep); border-radius: 14px; padding: 6px 12px;
  transition: background .12s, opacity .12s;
}
.tagchip:hover { background: var(--grey-2); }
.tagchip.active { background: var(--slb-blue); color: var(--white); }
/* when at least one chip is selected, dim the unselected ones */
.tag-chips.has-selection .tagchip:not(.active) { opacity: .45; }

/* list view used on full pages (no height cap / internal scroll) */
.discover-list--full { max-height: none; overflow: visible; padding-right: 0; }

.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .count { color: var(--muted); font-size: .88rem; }
.toolbar .spacer { flex: 1; }

@media (max-width: 880px) { .layout-2col { grid-template-columns: 1fr; } }

/* per-storefront sections on the All Dashboards page */
.sf-section { margin-bottom: 30px; }
.sf-section__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; color: var(--slb-deep); font-weight: 500;
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--grey-2);
}
.sf-section__title img { width: 22px; height: 22px; }
.sf-section__count {
  font-size: .78rem; color: var(--muted); background: var(--grey-1);
  border-radius: 12px; padding: 2px 10px; font-weight: 500;
}

/* ==========================================================================
   DASHBOARD INFO PAGE
   ========================================================================== */
.info-head { padding: 22px 0 0; }
.info-head .row { display: flex; align-items: flex-start; gap: 16px; }
.info-head .head-icon { width: 40px; height: 40px; }
.info-head h1 { margin: 0; }
.info-head .stat { color: var(--muted); font-size: .85rem; display: inline-flex; gap: 6px; align-items: center; }
.info-head .stats { display: flex; gap: 18px; margin-top: 4px; }
.info-head .stats svg { width: 15px; height: 15px; fill: currentColor; }
.info-head .spacer { flex: 1; }

.btn-primary {
  background: var(--slb-blue); color: var(--white); border: 0; border-radius: 22px;
  padding: 10px 20px; font-family: var(--font); font-weight: 500; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
}
.btn-primary:hover { background: #0010b0; text-decoration: none; color: var(--white); }
.btn-primary svg { width: 16px; height: 16px; fill: currentColor; }
.fav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--grey-2);
  background: var(--white); display: grid; place-items: center; cursor: pointer; }
.fav-btn svg { width: 18px; height: 18px; fill: var(--grey-4); }
/* Favorited state (heart filled in SLB Blue). Applies to the big round button
   on the dashboard page and the small icon buttons on cards/rows alike. */
.fav-toggle.is-fav svg { fill: var(--slb-blue); }
.fav-toggle:hover svg { fill: var(--slb-blue); }
.fav-form { margin: 0; }

.info-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; margin-top: 18px; }
@media (max-width: 900px) { .info-layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--white); border: 1px solid var(--grey-2); border-radius: var(--radius);
  padding: 20px; margin-bottom: 18px;
}
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; }
@media (max-width: 700px) { .meta-grid { grid-template-columns: 1fr 1fr; } }
.meta {
  display: flex; align-items: flex-start; gap: 10px;
}
/* Material icons and the owner initials bubble share one size (36px) so every
   tile's glyph lines up and the labels beside them align vertically. */
.meta .mi { width: 36px; height: 36px; flex: none; }
.meta .ava { width: 36px; height: 36px; border-radius: 50%; background: var(--frost-2);
  color: var(--slb-deep); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.meta .label { font-size: .72rem; color: var(--muted); display: block; line-height: 1.15; }
.meta .value { font-size: .92rem; color: var(--slb-deep); font-weight: 500; line-height: 1.15; }
/* Storefront link keeps the exact look of the other values — no underline,
   same color; only the click/navigation is added. */
.meta a.value { text-decoration: none; }
.meta a.value:hover { text-decoration: none; color: var(--slb-deep); }

.rail h4 { font-size: .85rem; color: var(--slb-deep); border-bottom: 1px solid var(--grey-2);
  padding-bottom: 8px; margin: 0 0 12px; }
.rail .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--grey-1); color: var(--slb-deep); border-radius: 14px;
  padding: 4px 12px; font-size: .8rem; }
.rail__block { margin-bottom: 26px; }
.rail__block a { font-size: .88rem; }
.muted { color: var(--muted); }

/* feedback sliders */
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .fb-grid { grid-template-columns: 1fr; } }
.fb-item { background: var(--grey-1); border-radius: var(--radius-sm); padding: 14px 16px; }
.fb-item .q { font-size: .9rem; color: var(--slb-deep); margin-bottom: 10px; }
.fb-item input[type=range] { width: 100%; accent-color: var(--slb-blue); }
.fb-scale { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-bottom: 6px; }
/* Value bubble that floats above the slider knob and follows it (app.js sets
   its left position from the slider value). */
.fb-slider { position: relative; padding-top: 30px; }
.fb-bubble { position: absolute; top: 0; transform: translateX(-50%);
  background: var(--slb-blue); color: var(--white); font-size: .74rem; font-weight: 600;
  line-height: 1; padding: 4px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.fb-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--slb-blue); }
/* Fixed-size, on-brand thumb so the bubble lines up the same in every browser. */
.fb-item input[type=range] { -webkit-appearance: none; appearance: none; height: 6px;
  border-radius: 3px; background: var(--grey-3); }
.fb-item input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--slb-blue);
  border: 2px solid var(--white); box-shadow: 0 1px 3px rgba(5,20,100,.3); cursor: pointer; }
.fb-item input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
  background: var(--slb-blue); border: 2px solid var(--white); cursor: pointer; }
.fb-item input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--grey-3); }
.fb-item input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--slb-blue); }
textarea { width: 100%; border: 1px solid var(--grey-2); border-radius: var(--radius-sm);
  padding: 10px; font-family: var(--font); resize: vertical; min-height: 90px; }

.badge-note {
  background: #fff8e1; border: 1px solid #ffe7a0; color: #7a5b00;
  font-size: .78rem; padding: 8px 12px; border-radius: 8px; display: inline-block; margin-top: 8px;
}

/* footer */
.footer { padding: 30px 0; color: var(--muted); font-size: .82rem; text-align: center; background: var(--page-bg); }
.footer img { height: 16px; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: .8; }

/* brand link should not underline on hover */
.topbar__brand:hover { text-decoration: none; }

/* ==========================================================================
   MODAL / POPUP
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(5, 20, 100, .45); }
.modal__card {
  position: relative; background: var(--white); border-radius: 14px; box-shadow: var(--shadow-hov);
  width: min(560px, 94vw); max-height: 88vh; overflow: auto; padding: 28px 30px;
}
.modal__close {
  position: absolute; top: 12px; right: 16px; border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--grey-5);
}
.modal__close:hover { color: var(--slb-deep); }
.modal__title {
  display: flex; align-items: center; gap: 10px; color: var(--slb-blue);
  font-size: 1.2rem; font-weight: 500; margin: 0 28px 14px 0;
}
.modal__title img { width: 22px; height: 22px; flex: none; }
.modal__card p { color: var(--slb-deep); font-size: .92rem; margin: 0 0 12px; }
.modal__subhead { font-weight: 500; }
.modal__list { margin: 0 0 16px; padding-left: 20px; color: var(--slb-deep); font-size: .9rem; }
.modal__list li { margin: 5px 0; }
.modal__note {
  display: flex; align-items: flex-start; gap: 10px; background: var(--grey-1);
  border-radius: 8px; padding: 12px 14px; font-size: .86rem; color: var(--slb-deep);
}
.modal__note img { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* while a popup is open, hide any open header dropdown behind it */
body.modal-open .dropdown { display: none !important; }

/* ==========================================================================
   ADMIN  (catalog management — tables, forms, flash messages)
   ========================================================================== */
/* Flash / notice banners (shown site-wide under the header) */
.flash-stack { margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.flash {
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem;
  border: 1px solid var(--grey-2); background: var(--white); color: var(--slb-deep);
}
.flash--success { background: #eafaf1; border-color: #b7e4c7; color: #1b6b3a; }
.flash--error   { background: #fdecea; border-color: #f5c2c0; color: #97231d; }

/* Activity log: keep the timestamp column on one line */
.admin-table td.nowrap { white-space: nowrap; }

/* Activity log: the per-change "field: old → new" list under each entry */
.activity-changes { margin: 6px 0 0; padding-left: 16px; list-style: none; }
.activity-changes li { font-size: .82rem; color: var(--grey-5); margin: 2px 0; }
.activity-field { font-weight: 600; color: var(--slb-deep); }
.activity-old { color: #97231d; text-decoration: line-through; }
.activity-new { color: #1b6b3a; }

/* Admin Management (access) page */
.access-intro { max-width: 760px; margin: 4px 0 18px; }
.access-panel { padding: 16px; margin-bottom: 18px; }
.access-panel h3 { margin: 0 0 10px; }
.access-add { display: flex; gap: 8px; margin-top: 12px; }
.access-add input[type="email"] {
  flex: 1; max-width: 360px; padding: 8px 10px;
  border: 1px solid var(--grey-2); border-radius: var(--radius-sm); font: inherit;
}

/* Admin overview cards */
.admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .admin-cards { grid-template-columns: 1fr; } }
.admin-card { position: relative; display: block; color: inherit; }
.admin-card:hover { text-decoration: none; box-shadow: var(--shadow-hov); }
.admin-card__count {
  position: absolute; top: 16px; right: 20px; font-size: 1.6rem;
  font-weight: 300; color: var(--slb-blue);
}

/* Toolbar above a list */
.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.admin-search {
  border: 1px solid var(--grey-2); border-radius: 18px; padding: 8px 14px;
  font-family: var(--font); font-size: .9rem; color: var(--text);
  background: var(--white); min-width: 240px;
}
.admin-search:focus { outline: none; border-color: var(--slb-blue); }

/* Tables */
.admin-tablewrap { padding: 0; overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--grey-2);
  vertical-align: middle;
}
.admin-table th { color: var(--muted); font-weight: 500; font-size: .8rem; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table code { background: var(--grey-1); padding: 2px 6px; border-radius: 6px; font-size: .82rem; }
.admin-actions-col { white-space: nowrap; text-align: right; }
.admin-sf { display: inline-flex; align-items: center; gap: 8px; }
.admin-sf img { display: inline-block; }
.admin-swatch { display: inline-block; width: 46px; height: 16px; border-radius: 8px; border: 1px solid var(--grey-2); }

/* Small buttons (edit / delete / cancel) */
.admin-btn {
  display: inline-block; border: 1px solid var(--grey-2); background: var(--white);
  color: var(--slb-deep); border-radius: 18px; padding: 6px 14px; font-size: .84rem;
  font-family: var(--font); cursor: pointer; text-decoration: none;
}
.admin-btn:hover { background: var(--grey-1); text-decoration: none; }
.admin-btn--danger { color: #97231d; border-color: #f5c2c0; }
.admin-btn--danger:hover { background: #fdecea; }
.admin-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Forms */
.admin-form .panel h3 { margin-top: 0; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 700px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field--wide { grid-column: 1 / -1; }
.admin-field > span { font-size: .82rem; color: var(--slb-deep); font-weight: 500; }
.admin-field em { color: var(--muted); font-weight: 400; font-style: normal; }
.admin-field input, .admin-field select, .admin-field textarea {
  border: 1px solid var(--grey-2); border-radius: var(--radius-sm);
  padding: 9px 11px; font-family: var(--font); font-size: .92rem; color: var(--text);
  background: var(--white); width: 100%;
}
.admin-field input[type=color] { padding: 4px; height: 40px; }
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus {
  outline: none; border-color: var(--slb-blue);
}
.admin-field input[readonly] { background: var(--grey-1); color: var(--muted); }
.admin-links { display: flex; flex-direction: column; gap: 10px; }
.admin-linkrow { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
@media (max-width: 700px) { .admin-linkrow { grid-template-columns: 1fr; } }
.admin-linkrow input {
  border: 1px solid var(--grey-2); border-radius: var(--radius-sm);
  padding: 9px 11px; font-family: var(--font); font-size: .9rem; width: 100%;
}
.admin-formactions { display: flex; align-items: center; gap: 12px; margin: 4px 0 30px; }

/* Login */
.admin-login { max-width: 460px; margin: 40px auto; }
.admin-login .panel { padding: 28px 30px; }

/* ---- Login page — frosted glass layout --------------------------------- */
.login-main {
  position: relative;
  display: flex;
  flex-direction: column;
}
.login-main::before {
  content: '';
  position: fixed;
  inset: -10px;
  background-image: url('../img/production-insights-web.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  z-index: -1;
}
.login-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}
.login-glass {
  width: 100%;
  max-width: 560px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(5, 20, 100, 0.22);
  padding: 2.25rem 2.5rem;
}
.login-glass h2 { margin-bottom: .25rem; }
.login-glass .muted { margin-top: 0; margin-bottom: 0; }

/* ---- Signed-in user (header top strip) -------------------------------- */
.topbar__user {
  display: flex; align-items: center; gap: 8px; color: var(--white);
  font-size: .9rem; max-width: 220px;
}
.topbar__user svg { flex: none; opacity: .9; }
.topbar__username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__signout {
  color: var(--white); font-size: .85rem; opacity: .85;
  border: 1px solid rgba(255,255,255,.4); border-radius: 16px; padding: 5px 12px;
}
.topbar__signout:hover { opacity: 1; background: rgba(255,255,255,.12); text-decoration: none; color: var(--white); }

/* ---- Dev-login (local development sign-in page) ----------------------- */
.devlogin { display: grid; gap: 12px; margin-top: 16px; }
.devlogin__user {
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: auto;
  column-gap: 12px; align-items: center; text-align: left; cursor: pointer;
  border: 1px solid var(--grey-2); border-radius: var(--radius-sm);
  background: var(--white); padding: 14px 16px; font-family: var(--font); color: var(--slb-deep);
}
.devlogin__user:hover { border-color: var(--slb-blue); box-shadow: var(--shadow); }
.devlogin__user svg { grid-row: 1 / 3; color: var(--slb-blue); }
.devlogin__name { font-weight: 600; font-size: 1rem; }
.devlogin__email { grid-column: 2; font-size: .85rem; color: var(--muted); }
.devlogin__role { grid-column: 2; font-size: .8rem; color: var(--slb-blue); margin-top: 3px; }

/* ---- Sign-in provider choice (login.html) ------------------------------ */
.login-providers {
  display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.login-provider {
  flex: 1; min-width: 180px;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.75rem 1.25rem;
  border: 2px solid var(--grey-2); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.login-provider:hover { border-color: var(--slb-blue); box-shadow: var(--shadow-hov); }
.login-provider__logo { height: 44px; max-width: 160px; width: auto; object-fit: contain; }
.login-provider__title { font-weight: 600; font-size: .95rem; margin-top: .25rem; }
.login-provider__sub { font-size: .8rem; color: var(--muted); }

/* ---- Icon picker (storefront form) ------------------------------------- */
.iconpick { position: relative; display: flex; align-items: center; gap: 10px; }

/* The dropdown trigger button — looks like the other form inputs. */
.iconpick__trigger {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--grey-2); border-radius: var(--radius-sm);
  background: var(--white); padding: 7px 10px; cursor: pointer;
  font-family: var(--font); font-size: .9rem; color: var(--slb-deep); text-align: left;
}
.iconpick__trigger:hover { border-color: var(--grey-3); }
.iconpick__trigger:focus { outline: none; border-color: var(--slb-blue);
  box-shadow: 0 0 0 3px rgba(0, 20, 220, 0.12); }
.iconpick__triggericon { width: 22px; height: 22px; flex: none; }
.iconpick__triggername { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.iconpick__caret { flex: none; color: var(--grey-5); }
.iconpick[data-open] .iconpick__caret { transform: rotate(180deg); }

/* Standalone preview of the current selection, next to the dropdown. */
.iconpick__preview {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--grey-2); border-radius: var(--radius-sm); background: var(--grey-1);
}
.iconpick__preview img { width: 26px; height: 26px; }

/* The pop-up: search box + scrollable grid of icon swatches. */
.iconpick__popup {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--white); border: 1px solid var(--grey-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-hov); padding: 10px;
}
.iconpick__search {
  width: 100%; border: 1px solid var(--grey-2); border-radius: var(--radius-sm);
  padding: 8px 10px; font-family: var(--font); font-size: .88rem; margin-bottom: 10px;
}
.iconpick__search:focus { outline: none; border-color: var(--slb-blue);
  box-shadow: 0 0 0 3px rgba(0, 20, 220, 0.12); }
.iconpick__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px;
}
.iconpick__swatch {
  aspect-ratio: 1 / 1; display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--white);
}
.iconpick__swatch img { width: 24px; height: 24px; }
.iconpick__swatch:hover { background: var(--grey-1); border-color: var(--grey-2); }
.iconpick__swatch.is-selected { background: rgba(0, 20, 220, 0.08); border-color: var(--slb-blue); }
.iconpick__swatch[hidden] { display: none; }
.iconpick__empty { color: var(--muted); font-size: .86rem; text-align: center; margin: 12px 0 4px; }