/* ============================================================
   Peptide Calculator v4
   Aventus Digital — aventusdigital.co.uk

   Every token below is a fallback. The plugin injects a matching
   .prc{...} block from Settings → Peptide Calculator which wins.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
.prc {
    /* Brand */
    --brand:        #202740;
    --brand-rgb:    32,39,64;
    --brand-on:     #ffffff;
    --brand-hover:  #3a4159;
    --brand-light:  #eef0f6;
    --brand-mid:    #c5c9dc;

    /* Surface */
    --bg:           #f4f6f9;
    --card:         #ffffff;
    --card-2:       #f8f9fc;

    /* Border */
    --line:         #e4e7ef;
    --line-2:       #d1d5e8;

    /* Text */
    --txt:          #111827;
    --txt-2:        #374151;
    --txt-muted:    #6b7280;
    --txt-faint:    #9ca3af;

    /* Semantic */
    --c-conc:       #2563eb;
    --c-draw:       #16a34a;
    --c-doses:      #d97706;
    --notice:       #d97706;
    --notice-bg:    #fffbeb;
    --notice-line:  #fde68a;
    --red:          #dc2626;
    --red-bg:       #fef2f2;
    --red-line:     #fca5a5;

    /* Type — inherits the theme's font by default */
    --font:    inherit;
    --mono:    inherit;
    --h-scale: 1;
    --b-scale: 1;
    --label-tt: uppercase;
    --label-ls: .07em;

    /* Geometry */
    --max-w: 1300px;
    --r-sm:  6px;
    --r:     10px;
    --r-lg:  14px;
    --r-xl:  18px;
    --r-pill: 8px;

    /* Syringe */
    --syr-scale:  1;
    --syr-body:   #565e7b;
    --syr-liquid: #c2c8e0;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:    0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);

    /* Motion */
    --ease: cubic-bezier(.4,0,.2,1);
    --t:    .15s;
}

/* ── Base ────────────────────────────────────────────────── */
.prc, .prc * { box-sizing: border-box; }
.prc input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.prc h2, .prc h3, .prc p { margin: 0; padding: 0; }

/* ── Wrapper ─────────────────────────────────────────────── */
.prc {
    font-family:  var(--font);
    background:   var(--bg);
    color:        var(--txt);
    max-width:    var(--max-w);
    width:        100%;
    margin:       0 auto 2.5rem;
    padding:      0;
    border-radius:var(--r-xl);
    border:       1px solid var(--line);
    overflow:     hidden;
    box-shadow:   var(--shadow-lg);
}

/* ── Header ─────────────────────────────────────────────── */
.prc-header {
    display:        flex;
    align-items:    center;
    gap:            1.1rem;
    padding:        1.85rem 2.25rem;
    background:     var(--card);
    border-bottom:  1px solid var(--line);
}
.prc-header__icon {
    width:  calc(56px * var(--h-scale));
    height: calc(56px * var(--h-scale));
    border-radius: var(--r);
    background:   var(--brand-light);
    border:       1px solid var(--brand-mid);
    display:      grid;
    place-items:  center;
    color:        var(--brand);
    flex-shrink:  0;
}
.prc-header__icon svg {
    width:  calc(30px * var(--h-scale));
    height: calc(30px * var(--h-scale));
}
.prc-header__title {
    font-family:    var(--font);
    font-size:      calc(1.55rem * var(--h-scale));
    font-weight:    700;
    color:          var(--txt);
    letter-spacing: -.022em;
    line-height:    1.2;
}
.prc-header__sub {
    font-size:   calc(.92rem * var(--b-scale));
    color:       var(--txt-muted);
    margin-top:  .35rem;
    font-weight: 400;
    line-height: 1.45;
}
.prc-badge {
    margin-left:    auto;
    font-size:      calc(.74rem * var(--b-scale));
    font-weight:    600;
    letter-spacing: var(--label-ls);
    text-transform: var(--label-tt);
    background:     var(--notice-bg);
    color:          var(--notice);
    border:         1px solid var(--notice-line);
    border-radius:  50px;
    padding:        .42rem .95rem;
    white-space:    nowrap;
    flex-shrink:    0;
    line-height:    1.2;
}

/* ── 3-Column Input Grid ─────────────────────────────────── */
.prc-inputs {
    display:  grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.prc-divider {
    width:      1px;
    background: var(--line);
    margin:     2rem 0;
    align-self: stretch;
}

/* ── Column ──────────────────────────────────────────────── */
.prc-col {
    padding: 2rem 2rem 1.75rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.prc-col__head {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    margin-bottom: 1.25rem;
    padding-bottom:1rem;
    border-bottom: 1px solid var(--line);
}
.prc-col__num {
    font-family:    var(--mono);
    font-size:      calc(.68rem * var(--b-scale));
    font-weight:    600;
    color:          var(--brand);
    background:     var(--brand-light);
    border:         1px solid var(--brand-mid);
    border-radius:  4px;
    padding:        3px 6px;
    letter-spacing: .05em;
    line-height:    1;
    flex-shrink:    0;
}
.prc-col__title {
    font-family:    var(--font);
    font-size:      calc(1.05rem * var(--h-scale));
    font-weight:    600;
    color:          var(--txt);
    letter-spacing: -.012em;
    line-height:    1.3;
    flex:           1;
}
.prc-col__unit {
    font-family:    var(--mono);
    font-size:      calc(.78rem * var(--b-scale));
    color:          var(--txt-faint);
    font-weight:    500;
    flex-shrink:    0;
}

/* ── Pill buttons ────────────────────────────────────────── */
.prc-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       .5rem;
}
.prc-pill { cursor: pointer; position: relative; margin: 0; }

.prc-pill span {
    display:       block;
    padding:       .58rem .95rem;
    border-radius: var(--r-pill);
    border:        1px solid var(--line-2);
    background:    var(--card-2);
    color:         var(--txt-2);
    font-family:   var(--mono);
    font-size:     calc(.9rem * var(--b-scale));
    font-weight:   500;
    transition:    all var(--t) var(--ease);
    user-select:   none;
    white-space:   nowrap;
    line-height:   1;
}
.prc-pill:hover span {
    border-color: var(--brand);
    color:        var(--brand);
    background:   var(--brand-light);
}
.prc-pill.is-active span,
.prc-pill input:checked + span {
    background:  var(--brand);
    border-color:var(--brand);
    color:       var(--brand-on);
    font-weight: 600;
    box-shadow:  0 1px 5px rgba(var(--brand-rgb), .28);
}
.prc-pill input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Custom input ────────────────────────────────────────── */
.prc-custom-wrap { margin-top: 1rem; }
/* On wide layouts margin-top:auto keeps every custom field on the same
   baseline even when one column's presets wrap onto an extra row. Below
   that the columns differ by too many rows and the gap reads as broken. */
@media (min-width: 1000px) {
    .prc-custom-wrap { margin-top: auto; padding-top: 1rem; }
}
.prc-custom {
    width:         100%;
    background:    var(--card-2);
    border:        1px solid var(--line-2);
    border-radius: var(--r);
    padding:       .75rem 1rem;
    color:         var(--txt);
    font-family:   var(--mono);
    font-size:     calc(.9rem * var(--b-scale));
    line-height:   1.3;
    outline:       none;
    transition:    border-color var(--t), box-shadow var(--t), background var(--t);
    -moz-appearance: textfield;
}
.prc-custom::-webkit-inner-spin-button,
.prc-custom::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prc-custom::placeholder { color: var(--txt-faint); font-size: calc(.85rem * var(--b-scale)); }
.prc-custom:focus {
    background:   var(--card);
    border-color: var(--brand);
    box-shadow:   0 0 0 3px rgba(var(--brand-rgb), .12);
}

/* ── Error ───────────────────────────────────────────────── */
.prc-error {
    display:      none;
    margin:       1.25rem 2.25rem 0;
    padding:      .85rem 1.15rem;
    border-radius:var(--r);
    background:   var(--red-bg);
    border:       1px solid var(--red-line);
    font-size:    calc(.88rem * var(--b-scale));
    color:        var(--red);
    line-height:  1.5;
}
.prc-error.show { display: block; animation: prc-shake .25s ease; }
@keyframes prc-shake {
    0%,100% { transform: translateX(0); }
    30%      { transform: translateX(-5px); }
    70%      { transform: translateX(5px); }
}

/* ── Results Panel ───────────────────────────────────────── */
.prc-results {
    margin:        1.75rem 2.25rem;
    border-radius: var(--r-lg);
    border:        1px solid var(--line);
    background:    var(--card);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
}
.prc-results__heading {
    display:        flex;
    align-items:    center;
    gap:            .55rem;
    padding:        1rem 1.5rem;
    border-bottom:  1px solid transparent;
    background:     var(--brand);
    color:          var(--brand-on);
    font-family:    var(--font);
    font-size:      calc(.85rem * var(--h-scale));
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height:    1;
}
.prc-results__heading svg {
    width:  calc(16px * var(--h-scale));
    height: calc(16px * var(--h-scale));
    opacity: .85;
}

/* ── Body: stats + syringe ───────────────────────────────── */
.prc-results__body {
    display:     grid;
    grid-template-columns: minmax(200px, 260px) 1fr minmax(200px, 260px);
    align-items: stretch;
    gap:         0;
    min-height:  calc(210px * var(--syr-scale));
}

/* ── Stat blocks ─────────────────────────────────────────── */
.prc-stats {
    display:        flex;
    flex-direction: column;
    gap:            0;
    height:         100%;
}
.prc-stats--left  { border-right: 1px solid var(--line); }
.prc-stats--right { border-left:  1px solid var(--line); }

.prc-stat {
    flex:     1;
    padding:  1.5rem 1.6rem;
    display:  flex;
    flex-direction: column;
    justify-content: center;
    gap:      .35rem;
    position: relative;
}
.prc-stat + .prc-stat {
    border-top: 1px solid var(--line);
}

/* Coloured left border per stat */
.prc-stat::before {
    content:  '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0 2px 2px 0;
}
.prc-stat--dose::before   { background: var(--brand); }
.prc-stat--conc::before   { background: var(--c-conc); }
.prc-stat--draw::before   { background: var(--c-draw); }
.prc-stat--doses::before  { background: var(--c-doses); }

.prc-stat__label {
    font-size:      calc(.74rem * var(--b-scale));
    font-weight:    600;
    letter-spacing: var(--label-ls);
    text-transform: var(--label-tt);
    color:          var(--txt-muted);
    line-height:    1.3;
}
.prc-stat__val {
    font-family:    var(--mono);
    font-size:      calc(2.25rem * var(--h-scale));
    font-weight:    600;
    color:          var(--txt);
    line-height:    1.05;
    letter-spacing: -.028em;
    word-break:     break-word;
}
.prc-stat--draw .prc-stat__val {
    color:     var(--c-draw);
    font-size: calc(2.65rem * var(--h-scale));
}
.prc-stat__unit {
    font-size:   calc(.74rem * var(--b-scale));
    color:       var(--txt-faint);
    font-family: var(--mono);
    line-height: 1.3;
}

@keyframes pop {
    0%   { opacity:.5; transform: scale(.93); }
    60%  { transform: scale(1.05); }
    100% { opacity:1;  transform: scale(1); }
}
.prc-stat__val.popping {
    animation: pop .22s var(--ease);
    transform-origin: left center;
    display: inline-block;
}

/* ── Syringe Centre ────────────────────────────────────────
   A flat 1 mL / 100U insulin syringe: needle on the LEFT, plunger on
   the RIGHT, liquid filling from the needle end. Every part is a plain
   rectangle sized off --syr-u (the barrel's outer height) so the whole
   graphic scales from one number.
   ---------------------------------------------------------- */
.prc-syringe-wrap {
    padding:    1.75rem 1.5rem;
    display:    flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    gap:        1rem;
}

.prc-syringe {
    /* --syr-fit shrinks the whole graphic on narrow layouts so the barrel
       keeps a usable share of the width; --syr-scale stays the user's setting. */
    --syr-fit:  1;
    --syr-s:    calc(var(--syr-scale) * var(--syr-fit));
    --syr-u:    calc(46px * var(--syr-s));   /* barrel outer height  */
    --syr-wall: calc(8px  * var(--syr-s));   /* barrel wall thickness */

    display:     flex;
    align-items: center;
    width:       100%;
    max-width:   calc(620px * var(--syr-s));
    /* room for the scale numbers, which hang below the barrel */
    margin-bottom: calc(1.4rem * var(--b-scale));
}

/* Needle → hub → collar (left of the barrel) */
.prc-syr__needle {
    width:  calc(56px * var(--syr-s));
    height: calc(9px  * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}
.prc-syr__hub {
    width:  calc(30px * var(--syr-s));
    height: calc(38px * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}
.prc-syr__collar {
    width:  calc(10px * var(--syr-s));
    height: calc(61px * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}

/* Barrel — a hollow rectangle; the walls are the border */
.prc-syr__barrel {
    position:   relative;
    flex:       1;
    min-width:  0;
    height:     var(--syr-u);
    background: var(--card);
    border-top:    var(--syr-wall) solid var(--syr-body);
    border-bottom: var(--syr-wall) solid var(--syr-body);
}

/* Liquid — grows from the needle end */
.prc-syr__fill {
    position:   absolute;
    left: 0; top: 0; bottom: 0;
    width:      0%;
    background: var(--syr-liquid);
    transition: width .55s var(--ease);
}

/* Tick marks sit inside the barrel, rising off the bottom wall */
.prc-syr__ticks {
    position:       absolute;
    inset:          0;
    pointer-events: none;
}
.prc-tick {
    position:   absolute;
    bottom:     0;
    width:      calc(2px * var(--syr-s));
    transform:  translateX(-50%);
    background: var(--syr-body);
}
.prc-tick--major { height: calc(18px * var(--syr-s)); }
.prc-tick--minor { height: calc(7px  * var(--syr-s)); }

/* Scale numbers hang below the barrel, centred on their major tick */
.prc-tick--label {
    position:    absolute;
    top:         calc(100% + var(--syr-wall) + (5px * var(--syr-s)));
    font-family: var(--mono);
    font-size:   calc(.72rem * var(--b-scale));
    font-weight: 700;
    color:       var(--syr-body);
    transform:   translateX(-50%);
    white-space: nowrap;
    line-height: 1;
}
.prc-tick--label.is-end { transform: translateX(-100%); }

/* Draw marker — sits at the liquid's edge */
.prc-syr__marker {
    position:  absolute;
    top: 0; bottom: 0;
    width:     calc(3px * var(--syr-s));
    background:var(--red);
    display:   none;
    transition:left .55s var(--ease);
}
.prc-syr__marker::after {
    content:      '';
    position:     absolute;
    top:          calc(0px - var(--syr-wall) - (7px * var(--syr-s)));
    left:         50%;
    transform:    translateX(-50%);
    border-left:  calc(6px * var(--syr-s)) solid transparent;
    border-right: calc(6px * var(--syr-s)) solid transparent;
    border-top:   calc(8px * var(--syr-s)) solid var(--red);
}

/* Flange → plunger head → rod → thumb pad (right of the barrel) */
.prc-syr__flange {
    width:  calc(9px  * var(--syr-s));
    height: calc(85px * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}
.prc-syr__head {
    width:  calc(28px * var(--syr-s));
    height: calc(56px * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}
.prc-syr__rod {
    width:  calc(49px * var(--syr-s));
    height: calc(20px * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}
.prc-syr__thumb {
    width:  calc(8px  * var(--syr-s));
    height: calc(47px * var(--syr-s));
    background: var(--syr-body);
    flex-shrink: 0;
}

/* Note below syringe */
.prc-syringe-note {
    font-size:   calc(.88rem * var(--b-scale));
    color:       var(--txt-muted);
    text-align:  center;
    line-height: 1.55;
    max-width:   400px;
}
.prc-syringe-note strong { color: var(--brand); font-weight: 600; }

/* ── Disclaimer ──────────────────────────────────────────── */
.prc-disclaimer {
    display:     flex;
    align-items: flex-start;
    gap:         .6rem;
    margin:      0 2.25rem 2rem;
    padding:     .95rem 1.2rem;
    border-radius:var(--r);
    background:  var(--notice-bg);
    border:      1px solid var(--notice-line);
    font-size:   calc(.82rem * var(--b-scale));
    color:       var(--notice);
    line-height: 1.6;
}
.prc-disclaimer svg {
    width:     calc(15px * var(--b-scale));
    height:    calc(15px * var(--b-scale));
    flex-shrink:0;
    margin-top:.15em;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .prc-header    { padding: 1.5rem 1.75rem; }
    .prc-col       { padding: 1.6rem 1.5rem 1.4rem; }
    .prc-results   { margin: 1.4rem 1.75rem; }
    .prc-error     { margin: 1rem 1.75rem 0; }
    .prc-disclaimer{ margin: 0 1.75rem 1.6rem; }
    .prc-results__body { grid-template-columns: minmax(170px, 210px) 1fr minmax(170px, 210px); }
}

@media (max-width: 900px) {
    .prc-results__body {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .prc-syringe-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
        border-bottom: 1px solid var(--line);
        padding: 1.5rem 1.25rem;
    }
    .prc-stats--left  { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line); }
    .prc-stats--right { grid-column: 2; grid-row: 2; border-left: none; }
}

@media (max-width: 760px) {
    .prc-inputs {
        grid-template-columns: 1fr;
    }
    .prc-divider {
        width:  auto;
        height: 1px;
        margin: 0 1.5rem;
    }
}

@media (max-width: 620px) {
    .prc-header { flex-wrap: wrap; gap: .9rem; padding: 1.35rem 1.25rem; }
    .prc-badge  { margin-left: 0; }
    .prc-col    { padding: 1.35rem 1.25rem 1.2rem; }
    .prc-results, .prc-disclaimer { margin-left: 1.25rem; margin-right: 1.25rem; }
    .prc-error  { margin-left: 1.25rem; margin-right: 1.25rem; }
    .prc { margin-bottom: 1.5rem; }

    /* Syringe: shrink the fixed parts so the barrel keeps most of the width,
       and drop the scale numbers a size so they stop crowding each other. */
    .prc-syringe { --syr-fit: .66; }
    .prc-syringe-wrap { padding: 1.4rem 1rem 1.2rem; }
    .prc-tick--label {
        font-size:      calc(.58rem * var(--b-scale));
        font-weight:    600;
        letter-spacing: -.02em;
    }

    /* Stats: syringe on top, then a 2 x 2 grid — dose | conc over draw | doses */
    .prc-results__body { grid-template-columns: 1fr; }
    .prc-syringe-wrap  { grid-column: 1; grid-row: 1; }
    .prc-stats         { flex-direction: row; }
    .prc-stats--left   { grid-column: 1; grid-row: 2; border: none; border-bottom: 1px solid var(--line); }
    .prc-stats--right  { grid-column: 1; grid-row: 3; border: none; }
    .prc-stat          { flex: 1 1 50%; min-width: 0; padding: 1.15rem 1rem 1.15rem 1.15rem; }
    /* The second cell's own colour bar is the divider — a border here too
       would read as a double rule. */
    .prc-stat + .prc-stat { border-top: none; border-left: none; }
    .prc-stat__val     { font-size: calc(1.95rem * var(--h-scale)); }
    .prc-stat--draw .prc-stat__val { font-size: calc(2.15rem * var(--h-scale)); }
}