/*
 * Styling for the shortcodes, scoped tightly on purpose.
 *
 * The seven approved pages carry their own stylesheets (theme/pages.css), and
 * anything global here silently overrides them: an unscoped `.legend` rule
 * added 10px above the legend on "How to use", which has its own vertical
 * legend and does not set that property.
 *
 * So every rule below is confined to the markup this plugin emits. Pages built
 * from the approved design keep their own styling untouched; a new page that
 * uses a shortcode still gets something sensible.
 */

/* Chart and legend — only inside a chartbox the shortcode produced. */
.chartbox .chart{width:100%; height:auto; display:block;}
.chartbox .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px;
                  font-size:.84rem; color:#4b5563;}
.chartbox .legend .lg{display:flex; align-items:center; gap:7px;}
.chartbox .legend .lg i{width:15px; height:4px; border-radius:2px; display:inline-block;}
.chartbox .legend .lg-note{color:#6b7280; font-style:italic;}

/* The Show button only appears when JavaScript is off. */
.chooser .asc-go{margin-top:10px; background:#45026d; color:#fff; border:0; border-radius:8px;
                 padding:10px 20px; font-weight:700; font-size:.92rem; cursor:pointer;}
.chooser .asc-go:hover{background:#5a0d87;}

/* Shortcode output on pages that have no approved stylesheet of their own. */
.asc-figure{font-weight:700; color:#051d55;}
.asc-figure.asc-missing{font-weight:400; color:#6b7280; font-style:italic;}
.asc-empty{color:#6b7280; font-style:italic;}

/* Cropped artwork used for the indicator-card and findings glyphs. */
.metric .m-ic img{width:24px; height:24px; object-fit:contain; display:block;}
.fcard .f-ic img{width:100%; height:100%; object-fit:contain; display:block;}

/* ---------------------------------------------------------------------------
   Paid areas. Shown in place of a chart, table or card set when the visitor
   has not bought access. Styled as a quiet panel rather than an alarm: the
   person reading it has just chosen their own council and is the most likely
   buyer on the site, so this is a shop window, not an error.
   --------------------------------------------------------------------------- */
.asc-locked{border:1.5px solid #e2d6ec; background:#faf7fc; border-radius:16px;
            padding:22px 22px 18px; margin:14px 0 18px;}
.asc-locked-h{color:#45026d; font-weight:800; font-size:1.06rem; margin:0 0 8px;}
.asc-locked-b{color:#3f4652; font-size:.94rem; line-height:1.55; margin:0 0 16px; max-width:60ch;}
.asc-locked-a{margin:0; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.asc-locked-signin{color:#45026d; font-size:.9rem; text-decoration:underline;}
.asc-locked-inline{color:#8b7fa0; cursor:help;}
@media (max-width:480px){
  .asc-locked{padding:18px 16px 14px;}
  .asc-locked-a .btn-fill{display:block; width:100%; text-align:center;}
}

/* ---------------------------------------------------------------------------
   Feedback panel. A <details> element, so it opens and closes without any
   JavaScript and is keyboard-operable by default.
   --------------------------------------------------------------------------- */
.asc-fb{position:fixed; right:18px; bottom:0; z-index:60; width:min(360px, calc(100vw - 36px));
        font-family:inherit;}
.asc-fb-tab{list-style:none; cursor:pointer; background:#45026d; color:#fff; font-weight:700;
            font-size:.92rem; padding:10px 20px; border-radius:10px 10px 0 0; display:inline-block;
            user-select:none;}
.asc-fb-tab::-webkit-details-marker{display:none;}
.asc-fb-tab:hover{background:#5a0d87;}
.asc-fb-tab:focus-visible{outline:3px solid #c99700; outline-offset:2px;}
.asc-fb-body{background:#fff; border:1.5px solid #e2d6ec; border-bottom:none;
             border-radius:12px 12px 0 0; padding:18px 18px 20px;
             box-shadow:0 -6px 28px rgba(5,29,85,.13);}
.asc-fb-h{color:#051d55; font-weight:800; margin:0 0 10px; font-size:1rem;}
.asc-fb-scale{border:0; padding:0; margin:0 0 14px; display:flex; gap:14px; flex-wrap:wrap;}
.asc-fb-scale label{font-size:.88rem; color:#3f4652; display:flex; align-items:center; gap:5px;}
.asc-fb-l{display:block; font-size:.85rem; color:#3f4652; margin:0 0 5px;}
.asc-fb textarea, .asc-fb input[type=email]{width:100%; border:1.5px solid #d8d8e4; border-radius:9px;
        padding:9px 10px; font-family:inherit; font-size:.9rem; margin-bottom:12px; color:#23262e;}
.asc-fb textarea:focus, .asc-fb input:focus{outline:3px solid #c99700; outline-offset:1px;}
.asc-fb .btn-fill{width:100%; border:0; cursor:pointer; font-size:.94rem;}
.asc-fb-note{font-size:.76rem; color:#6b7280; margin:10px 0 0; line-height:1.45;}
.asc-fb-thanks{margin:0; color:#1c5e38; font-weight:700;}
/* Hidden from people, reachable by anything filling the form in automatically. */
.asc-fb-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
@media print{ .asc-fb{display:none;} }

/* Sign-in details on the order confirmation page. Prominent on purpose: this
   is the one moment a mistyped email is both obvious and still fixable. */
.asc-signin-check{border:2px solid #45026d; border-radius:16px; padding:20px 22px 16px;
                  margin:0 0 26px; background:#faf7fc;}
.asc-sc-h{color:#45026d; font-weight:800; font-size:1.05rem; margin:0 0 10px;}
.asc-sc-b{color:#3f4652; font-size:.94rem; line-height:1.55; margin:0 0 10px; max-width:62ch;}
.asc-sc-em{margin:0 0 12px; font-size:1.16rem; font-weight:800; color:#051d55; word-break:break-all;}
.asc-sc-lab{display:block; font-size:.86rem; font-weight:400; color:#6b7280; margin-top:3px;
            word-break:normal;}
@media (max-width:480px){ .asc-signin-check{padding:16px 15px 12px;} .asc-sc-em{font-size:1.02rem;} }

/* Show/hide button inside a password field. Positioned against the field's own
   container: wrapping the input in a new element broke WooCommerce's floating
   label, which sat on top of the typed password. */
.asc-pw-host{position:relative;}
.asc-pw-host input[type="password"], .asc-pw-host input[type="text"]{padding-right:72px !important;}
.asc-pw-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:2;
               background:none; border:0; padding:6px 8px; cursor:pointer;
               color:#45026d; font:inherit; font-size:.84rem; font-weight:700;
               text-decoration:underline; line-height:1;}
.asc-pw-toggle:hover{color:#5a0d87;}
.asc-pw-toggle:focus-visible{outline:3px solid #c99700; outline-offset:2px; border-radius:4px;}

/* What will be accepted, said before it is refused. */
.asc-pw-hint{font-size:.82rem; color:#4b5563; line-height:1.5; margin:6px 0 0; max-width:52ch;}