/*
 * Review Box — front-end + editor skin.
 * Every colour, the radius and both fonts are CSS custom properties, set from
 * Settings → Review Box (printed inline as `.srb{…}`). Themes can also
 * override them directly, e.g.  .srb{ --srb-primary:#111; }
 *
 * Layouts:  .srb--top  score banner on top (default)  ·  .srb--side  score column left
 */
.srb-wrap{container-type:inline-size;container-name:srb;margin:36px 0}

.srb{
  --srb-primary:#1e3a8a;
  --srb-primary-deep:#172554;
  --srb-accent:#60a5fa;
  --srb-on-primary:#ffffff;
  --srb-card:#ffffff;
  --srb-ink:#0f172a;
  --srb-muted:#64748b;
  --srb-line:#e2e8f0;
  --srb-soft:#f1f5f9;
  --srb-radius:10px;
  --srb-font:inherit;
  --srb-score-font:inherit;

  display:grid;
  grid-template-columns:minmax(210px,34%) 1fr;
  background:var(--srb-card);
  border:1px solid var(--srb-line);
  border-radius:var(--srb-radius);
  overflow:hidden;
  font-family:var(--srb-font);
  color:var(--srb-ink);
  line-height:1.35;
  text-align:left;
}
.srb--shadow{box-shadow:0 8px 24px rgba(15,23,42,.10)}
.srb--noscore{grid-template-columns:1fr}
.srb,.srb *{box-sizing:border-box}
.srb :where(dl,dt,dd,p,span,b,h4){margin:0;padding:0}

/* ---------- score panel ---------- */
.srb__score{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:24px 26px 26px;
  color:var(--srb-on-primary);
  background:linear-gradient(160deg,var(--srb-primary) 0%,var(--srb-primary-deep) 100%);
}
/* optional texture, drawn in the accent colour */
.srb__score::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  color:var(--srb-accent);
}
.srb--pattern-dots .srb__score::before{
  opacity:.16;
  background-image:radial-gradient(currentColor 1.4px,transparent 1.6px);
  background-size:14px 14px;
}
.srb--pattern-grid .srb__score::before{
  opacity:.12;
  background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);
  background-size:22px 22px;
}
.srb--pattern-diagonal .srb__score::before{
  opacity:.12;
  background-image:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 12px);
}

/* featured image behind the score panel, under a scrim in the panel colour */
.srb__score.has-photo{
  background-image:
    linear-gradient(160deg,
      color-mix(in srgb,var(--srb-primary) 76%,transparent) 0%,
      color-mix(in srgb,var(--srb-primary-deep) 88%,transparent) 60%,
      color-mix(in srgb,var(--srb-primary-deep) 95%,transparent) 100%),
    var(--srb-photo);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
/* fallback for browsers without color-mix */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .srb__score.has-photo{
    background-image:linear-gradient(160deg,rgba(0,0,0,.55),rgba(0,0,0,.78)),var(--srb-photo);
  }
}
.srb__score.has-photo::before{opacity:.06}
.srb__score.has-photo .srb__num b{text-shadow:0 2px 14px rgba(0,0,0,.5)}
.srb__score.has-photo .srb__label{text-shadow:0 1px 8px rgba(0,0,0,.45)}

.srb__badge{
  align-self:flex-start;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--srb-primary-deep);background:var(--srb-accent);
  border-radius:999px;padding:3px 11px;
}
.srb__label{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--srb-on-primary);opacity:.78;
}
.srb__num{display:flex;align-items:baseline;gap:6px;font-family:var(--srb-score-font)}
.srb__num b{font-size:80px;line-height:.86;letter-spacing:-.035em;font-weight:900;color:var(--srb-on-primary)}
.srb__num span{font-size:20px;font-weight:700;color:var(--srb-on-primary);opacity:.6;letter-spacing:0}

.srb__meter{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:2px}
.srb__seg{position:relative;height:8px;border-radius:2px;background:color-mix(in srgb,var(--srb-on-primary) 18%,transparent);overflow:hidden}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.srb__seg{background:rgba(255,255,255,.18)}}
.srb__seg::after{
  content:'';position:absolute;inset:0;
  background:var(--srb-accent);
  box-shadow:0 0 10px var(--srb-accent);
  transform-origin:left center;
  transform:scaleX(var(--f,0));
}

/* ---------- facts ---------- */
.srb__facts{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--srb-line);
  align-content:stretch;
}
.srb__fact{background:var(--srb-card);padding:18px 24px;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.srb__fact:last-child:nth-child(odd){grid-column:1 / -1}
.srb__fact:only-child{grid-column:1 / -1}
.srb .srb__fact dt{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--srb-muted)}
.srb .srb__fact dd{font-size:17px;font-weight:700;color:var(--srb-ink);overflow-wrap:anywhere;text-wrap:pretty}

/* ---------- spec sheet (hardware) ---------- */
.srb__specsheet{grid-column:1 / -1;border-top:1px solid var(--srb-line);background:var(--srb-card)}
.srb__specsheet-h{padding:16px 24px 8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--srb-muted)}
.srb .srb__specs{display:block;padding:0 0 8px}
.srb__spec{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:16px;align-items:baseline;padding:9px 24px;border-top:1px solid var(--srb-soft)}
.srb__spec:first-child{border-top:1px solid var(--srb-line)}
.srb__spec:nth-child(even){background:var(--srb-soft)}
.srb__spec.is-wide{grid-template-columns:1fr}
.srb .srb__spec dt{font-size:12px;font-weight:700;color:var(--srb-muted);letter-spacing:.02em}
.srb .srb__spec dd{font-size:14px;font-weight:600;color:var(--srb-ink);overflow-wrap:anywhere;text-wrap:pretty}

/* ---------- top layout (default) ---------- */
.srb.srb--top{grid-template-columns:1fr}
.srb--top .srb__score{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:8px 30px;padding:30px 34px;min-height:190px}
.srb--top .srb__badge{flex-basis:auto;order:1;margin-bottom:4px}
.srb--top .srb__badge + .srb__label{flex-basis:100%}
.srb--top .srb__label{flex-basis:100%;order:2;margin-bottom:-4px}
.srb--top .srb__num{order:3}
.srb--top .srb__num b{font-size:92px}
.srb--top .srb__meter{order:4;flex:1 1 260px;align-self:flex-end;margin:0 0 16px}
.srb--top .srb__seg{height:12px}
.srb--top .srb__facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--srb-line);border-top:1px solid var(--srb-line)}
.srb--top.srb--noscore .srb__facts{border-top:0}
.srb--top .srb__fact{flex:1 1 220px;padding:20px 28px}

/* ---------- narrow containers (works in sidebars too) ---------- */
@container srb (max-width: 560px){
  .srb{grid-template-columns:1fr}
  .srb__score{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"badge badge" "label label" "num meter";align-items:end;gap:10px 18px;padding:18px 20px 20px}
  .srb__badge{grid-area:badge;justify-self:start}
  .srb__label{grid-area:label;align-self:end}
  .srb__num{grid-area:num}
  .srb__num b{font-size:60px}
  .srb__meter{grid-area:meter;align-self:center;margin:0 0 6px}
  .srb__fact{padding:14px 18px}
  .srb .srb__fact dd{font-size:15px}
  .srb__specsheet-h{padding:14px 18px 6px}
  .srb__spec{padding:8px 18px;gap:12px}
  .srb--top .srb__score{padding:20px;min-height:150px;gap:6px 16px}
  .srb--top .srb__num b{font-size:64px}
  .srb--top .srb__meter{flex-basis:100%;align-self:auto;margin:6px 0 0}
  .srb--top .srb__fact{flex:1 1 160px;padding:14px 18px}
}
@container srb (max-width: 360px){
  .srb__facts{grid-template-columns:1fr}
  .srb__fact:last-child:nth-child(odd){grid-column:auto}
  .srb__spec{grid-template-columns:1fr;gap:2px}
  .srb--top .srb__num b{font-size:54px}
}