/* TOOLS CSS */

/* =========================================================
   Shared module compatibility

   Existing Light Tool markup retains the tool-* class names.
   These mirror the shared Drey module components so the PHP
   does not need a second migration pass.
   ========================================================= */

@media (max-width: 480px) {

    .tool-textarea {
        min-height              : 13rem ;
    }

}

@media (prefers-reduced-motion: reduce) {

    .tool-button {
        animation-duration      : 1ms ;
        transition-duration     : 1ms ;
    }

}

.tools-page {
    box-sizing                  : border-box ;
    margin                      : 0 auto ;
    max-width                   : 1180px ;
    padding                     : 0.7rem 1rem ;
}

.tools-page *,
.tools-page *::before,
.tools-page *::after {
    box-sizing                  : border-box ;
}

.tool-heading {
    margin-bottom               : 0.55rem ;
    max-width                   : none ;
}

.tool-heading__eyebrow {
    color                       : var(--grey) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.78rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.12em ;
    line-height                 : 1 ;
    margin                      : 0 ;
    text-transform              : uppercase ;
}

.tool-heading h1 {
    color                       : var(--dark-green) ;
    font-family                 : var(--merriweather-face), serif ;
    font-size                   : clamp(2rem, 3vw, 3rem) ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    line-height                 : 0.9 ;
    margin                      : -0.08rem 0 0.12rem 0 ;
}

.tool-heading > p:not(.tool-heading__eyebrow) {
    font-family                 : var(--raleway-face), sans-serif ;
    line-height                 : 1.08 ;
    margin                      : 0 ;
}

.random-selector__controls,
.content-warning__panel,
.dip-switch-calculator__panel,
.audio-delay__panel,
.power-calc__panel {
    background                  : var(--light-green) ;
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    box-shadow                  : 0 2px 6px rgba(33, 71, 0, 0.12) ;
    padding                     : 0.7rem 0.85rem ;
}

.tool-label {
    color                       : var(--dark-green) ;
    display                     : block ;
    font-family                 : var(--merriweather-face), serif ;
    font-size                   : 1rem ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    line-height                 : 1.1 ;
    margin-bottom               : 0.3rem ;
}

.tool-input,
.tool-textarea {
    background                  : #ffffff ;
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    color                       : #111111 ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 0.95rem ;
    transition                  : box-shadow 160ms ease,
                                  border-color 160ms ease ;
}

.tool-input {
    display                     : block ;
    min-height                  : 2.5rem ;
    padding                     : 0.45rem 0.65rem ;
    width                       : 100% ;
}

.tool-textarea {
    display                     : block ;
    line-height                 : 1.3 ;
    min-height                  : 8rem ;
    padding                     : 0.55rem 0.65rem ;
    resize                      : vertical ;
    width                       : 100% ;
}

.tool-input:focus,
.tool-textarea:focus {
    border-color                : var(--dark-purple) ;
    box-shadow                  : 0 0 0 4px rgba(54, 15, 90, 0.16) ;
    outline                     : none ;
}

.tool-help {
    color                       : var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.82rem ;
    line-height                 : 1.2 ;
    margin                      : 0.3rem 0 0.6rem 0 ;
}

.tool-button-row {
    display                     : grid ;
    gap                         : 0.75rem ;
    grid-template-columns       : 1fr 1fr ;
}

.tool-button {
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    cursor                      : pointer ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 0.9rem ;
    font-weight                 : 700 ;
    min-height                  : 2.5rem ;
    padding                     : 0.45rem 0.8rem ;
    transition                  : box-shadow 130ms ease,
                                  background 130ms ease,
                                  border-color 130ms ease,
                                  opacity 130ms ease ;
}

.tool-button:hover:not(:disabled) {
    box-shadow                  : 0 2px 5px rgba(33, 71, 0, 0.18) ;
}

.tool-button:active:not(:disabled) {
    box-shadow                  : none ;
}

.tool-button:focus-visible {
    outline                     : 4px solid rgba(54, 15, 90, 0.28) ;
    outline-offset              : 2px ;
}

.tool-button:disabled {
    cursor                      : not-allowed ;
    opacity                     : 0.42 ;
}

.tool-button--primary {
    background                  : var(--dark-purple) ;
    border-color                : var(--dark-purple) ;
    color                       : #ffffff ;
}

.tool-button--primary:hover:not(:disabled) {
    background                  : var(--dark-green) ;
    border-color                : var(--dark-green) ;
}

.tool-button--secondary {
    background                  : #ffffff ;
    border-color                : var(--dark-green) ;
    color                       : var(--dark-green) ;
}

.tool-button--secondary:hover:not(:disabled) {
    background                  : var(--light-green) ;
}

@media (max-width: 700px) {

    .tools-page {
        padding                 : 0.55rem 0.7rem ;
    }

    .tool-button-row {
        grid-template-columns   : 1fr ;
    }

}


/* =========================================================
   Random Selecta
   ========================================================= */

.random-selector {
    align-items                 : start ;
    display                     : grid ;
    gap                         : 0.8rem ;
    grid-template-columns       : minmax(290px, calc(40% + 30px)) minmax(320px, 1fr) ;
}

.random-selector__controls {
    max-height                  : none ;
    overflow                    : visible ;
}

.random-selector__message {
    color                       : var(--dark-purple) ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 0.82rem ;
    font-weight                 : 700 ;
    min-height                  : 1.1rem ;
    padding-top                 : 0.4rem ;
}

.random-selector__wheel-column {
    display                     : flex;
    flex-direction              : column;
    align-items                 : center;
    justify-content             : flex-start;
    align-self                  : flex-start;
}

.wheel-shell {
    aspect-ratio                : 1 / 1 ;
    filter                      : drop-shadow(0 4px 7px rgba(33, 71, 0, 0.18)) ;
    max-height                  : calc(100vh - 9rem) ;
    max-width                   : min(575px, calc(100vh - 9rem)) ;
    position                    : relative ;
    width                       : 100% ;
}

.selector-wheel {
    display                     : block ;
    height                      : 100% ;
    width                       : 100% ;
}

.wheel-pointer {
    height                      : 24%;
    left                        : 50%;
    overflow                    : visible;
    pointer-events              : none;
    position                    : absolute;
    top                         : -13%;
    transform                   : translateX(-50%) rotate(198deg);
    transform-origin            : 50% 78%;
    width                       : 18%;
    will-change                 : transform;
    z-index                     : 20;
}

.wheel-pointer img {
    display                     : block;
    height                      : auto;
    left                        : -32%;
    max-width                   : none;
    position                    : absolute;
    transform                   : rotate(295deg);
    top                         : 52%;
    width                       : 150%;
}

.wheel-centre {
    position                    : absolute;
    left                        : 50%;
    top                         : 50%;
    width                       : 34%;
    height                      : 34%;
    transform                   : translate(-50%, -58%);
    z-index                     : 10;

    display                     : flex;
    justify-content             : center;
    align-items                 : flex-end;

    cursor                      : pointer;
    pointer-events              : auto;
    
}

button.wheel-centre {
    background                  : none;
    border                      : 0;
    padding                     : 0;
}

.wheel-centre img {
    width                       : 100%;
    height                      : auto;
    display                     : block;
    object-fit                  : contain;

    /* allow Hazel to poke out */
    transform                   : translateY(-18%);
}

.wheel-centre span {
    color                       : var(--dark-green) ;
    font-family                 : var(--merriweather-face, serif) ;
    font-size                   : clamp(0.7rem, 2vw, 1.35rem) ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    letter-spacing              : 0.08em ;
}

@media (max-width: 850px) {
    .random-selector {
        grid-template-columns   : 1fr ;
    }

    .random-selector__controls {
        order                   : 2 ;
    }

    .random-selector__wheel-column {
        order                   : 1 ;
    }

    .wheel-shell {
        max-width               : 480px ;
    }
}

/* =========================================================
   Content Warning Generator
   ========================================================= */

.content-warning {
    max-width                   : 1100px ;
}

.content-warning__panel {
    min-width                   : 0 ;
}

.content-warning .tool-help {
    line-height                 : 1.25 ;
    margin                      : 0.3rem 0 0.7rem 0 ;
}

.content-warning__presets {
    align-content               : flex-start ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 0.25rem ;
}

.content-warning__preset {
    background                  : #ffffff ;
    border                      : 1px solid var(--dark-green) ;
    border-radius               : 4px ;
    color                       : var(--dark-green) ;
    cursor                      : pointer ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 0.78rem ;
    font-weight                 : 700 ;
    line-height                 : 1 ;
    padding                     : 0.3rem 0.45rem ;
}

.content-warning__preset:hover {
    background                  : rgba(33, 71, 0, 0.07) ;
}

.content-warning__preset.is-selected {
    background                  : var(--dark-purple) ;
    border-color                : var(--dark-purple) ;
    color                       : #ffffff ;
}

.content-warning .tool-textarea,
.content-warning__text {
    flex                        : 1 ;
    height                      : 100% ;
    line-height                 : 1.35 ;
    min-height                  : 7rem ;
    resize                      : none ;
}

.content-warning__footer {
    align-items                 : end ;
    display                     : grid ;
    gap                         : 0.5rem ;
    grid-template-columns       : minmax(0, 1fr) auto auto ;
    margin-top                  : 0.65rem ;
}

.content-warning__filename {
    align-items                 : center ;
    display                     : grid ;
    gap                         : 0.3rem ;
    grid-template-columns       : auto minmax(0, 1fr) auto ;
    min-width                   : 0 ;
}

.content-warning__filename .tool-label {
    margin                      : 0 ;
    white-space                 : nowrap ;
}

.content-warning__filename span {
    color                       : var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 0.85rem ;
    font-weight                 : 700 ;
}

.content-warning__footer .tool-button {
    min-width                   : 8rem ;
    white-space                 : nowrap ;
}

.content-warning .tool-button:hover:not(:disabled) {
    transform                   : none ;
}

@media (max-width: 850px) {

    .content-warning__main {
        grid-template-columns   : 1fr ;
    }

    .content-warning__footer {
        grid-template-columns   : 1fr 1fr ;
    }

    .content-warning__filename {
        grid-column             : 1 / -1 ;
    }

}

.content-warning__heading-row {
    align-items                 : center ;
    display                     : grid ;
    gap                         : 0.5rem ;
    grid-template-columns       : auto minmax(0, 1fr) ;
    margin-bottom               : 0.55rem ;
}

.content-warning__heading-row .tool-label {
    margin                      : 0 ;
    white-space                 : nowrap ;
}

.content-warning__heading-input {
    position                    : relative ;
}

.content-warning__heading-input i {
    color                       : var(--dark-green) ;
    left                        : 0.65rem ;
    pointer-events              : none ;
    position                    : absolute ;
    top                         : 50% ;
    transform                   : translateY(-50%) ;
}

.content-warning__heading-input .tool-input {
    padding-left                : 2rem ;
}

.content-warning__main {
    align-items                 : stretch ;
    display                     : grid ;
    gap                         : 0.8rem ;
    grid-template-columns       : minmax(0, 0.95fr) minmax(0, 1.05fr) ;
}

.content-warning__column {
    display                     : flex ;
    flex-direction              : column ;
    min-width                   : 0 ;
}

.content-warning__column .tool-label {
    margin-bottom               : 0.25rem ;
}

.content-warning__column .tool-help {
    margin                      : 0.3rem 0 0 0 ;
}

/* =========================================================
   DMX DIP Switch Calculator
   ========================================================= */

.dip-switch-calculator {
    max-width                   : 1100px ;
}

.dip-switch-calculator__panel {
    padding                     : 0.85rem ;
}

.dip-switch-calculator__address-row {
    align-items                 : end ;
    display                     : grid ;
    gap                         : 0.8rem ;
    grid-template-columns       : minmax(180px, 0.5fr) minmax(0, 1fr) ;
}

.dip-switch-calculator__address-field {
    min-width                   : 0 ;
}

.dip-switch-calculator__address {
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 1.8rem ;
    font-weight                 : 700 ;
    min-height                  : 3.35rem ;
    text-align                  : center ;
}

.dip-switch-calculator__summary {
    display                     : grid ;
    gap                         : 0.5rem ;
    grid-template-columns       : 1fr 1fr ;
}

.dip-switch-calculator__summary > div {
    background                  : rgba(255, 255, 255, 0.64) ;
    border                      : 1px solid var(--dark-green) ;
    border-radius               : 4px ;
    min-width                   : 0 ;
    padding                     : 0.45rem 0.6rem ;
}

.dip-switch-calculator__summary span {
    color                       : var(--dark-green) ;
    display                     : block ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 0.72rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.06em ;
    text-transform              : uppercase ;
}

.dip-switch-calculator__summary strong {
    color                       : var(--dark-purple) ;
    display                     : block ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 1.15rem ;
    line-height                 : 1.15 ;
    overflow-wrap               : anywhere ;
}

.dip-switch-calculator__bank-wrap {
    margin                      : 1rem auto 0.75rem auto ;
    max-width                   : 820px ;
}

.dip-switch-bank {
    background                  : #b93c2f ;
    border                      : 3px solid #73261f ;
    border-radius               : 6px ;
    box-shadow                  : inset 0 0 0 2px rgba(255, 255, 255, 0.14),
                                  0 3px 7px rgba(33, 71, 0, 0.16) ;
    padding                     : 0.45rem 0.55rem 0.6rem 0.55rem ;
}

.dip-switch-bank__on {
    color                       : #ffffff ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 0.8rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.12em ;
    margin-bottom               : 0.2rem ;
    text-align                  : left ;
}

.dip-switch-bank__switches {
    display                     : grid ;
    gap                         : clamp(0.25rem, 1vw, 0.6rem) ;
    grid-template-columns       : repeat(9, minmax(0, 1fr)) ;
}

.dip-switch-bank__column {
    align-items                 : center ;
    display                     : flex ;
    flex-direction              : column ;
    min-width                   : 0 ;
}

.dip-switch-bank__number,
.dip-switch-bank__value {
    color                       : #ffffff ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : clamp(0.65rem, 1.4vw, 0.82rem) ;
    font-weight                 : 700 ;
    line-height                 : 1 ;
}

.dip-switch-bank__number {
    margin-bottom               : 0.28rem ;
}

.dip-switch-bank__value {
    margin-top                  : 0.3rem ;
}

.dip-switch {
    appearance                  : none ;
    background                  : transparent ;
    border                      : 0 ;
    cursor                      : pointer ;
    display                     : block ;
    padding                     : 0 ;
    width                       : 100% ;
}

.dip-switch:focus-visible {
    outline                     : 4px solid rgba(255, 255, 255, 0.78) ;
    outline-offset              : 3px ;
}

.dip-switch__track {
    background                  : #4b1713 ;
    border                      : 2px solid #661d17 ;
    border-radius               : 3px ;
    box-shadow                  : inset 0 2px 5px rgba(0, 0, 0, 0.36) ;
    display                     : block ;
    height                      : clamp(72px, 11vw, 108px) ;
    margin                      : 0 auto ;
    max-width                   : 50px ;
    min-width                   : 28px ;
    padding                     : 4px ;
    position                    : relative ;
    width                       : 70% ;
}

.dip-switch__toggle {
    background                  : #f3eee6 ;
    border                      : 1px solid #a49b91 ;
    border-radius               : 2px ;
    bottom                      : 4px ;
    box-shadow                  : 0 2px 4px rgba(0, 0, 0, 0.28) ;
    height                      : 43% ;
    left                        : 4px ;
    position                    : absolute ;
    right                       : 4px ;
    transition                  : bottom 130ms ease,
                                  background 130ms ease ;
}

.dip-switch.is-on .dip-switch__toggle {
    background                  : #ffffff ;
    bottom                      : calc(57% - 4px) ;
}

.dip-switch-calculator__help {
    margin-bottom               : 0 ;
}

.dip-switch-calculator__footer {
    align-items                 : center ;
    display                     : grid ;
    gap                         : 0.7rem ;
    grid-template-columns       : auto minmax(0, 1fr) ;
    margin-top                  : 0.7rem ;
}

.dip-switch-calculator__message {
    color                       : var(--dark-purple) ;
    font-family                 : var(--roboto-condensed-face, sans-serif) ;
    font-size                   : 0.85rem ;
    font-weight                 : 700 ;
}

@media (max-width: 650px) {

    .dip-switch-calculator__address-row {
        grid-template-columns   : 1fr ;
    }

    .dip-switch-calculator__summary {
        gap                     : 0.35rem ;
    }

    .dip-switch-calculator__bank-wrap {
        width                   : 100% ;
    }

    .dip-switch-bank {
        overflow                : hidden ;
        padding                 : 0.4rem 0.3rem 0.5rem 0.3rem ;
    }

    .dip-switch-bank__switches {
        gap                     : 0.15rem ;
        grid-template-columns   : repeat(9, minmax(0, 1fr)) ;
        min-width               : 0 ;
        width                   : 100% ;
    }

    .dip-switch-bank__number,
    .dip-switch-bank__value {
        font-size               : clamp(0.5rem, 2.4vw, 0.7rem) ;
    }

    .dip-switch__track {
        height                  : clamp(52px, 15vw, 72px) ;
        min-width               : 0 ;
        width                   : clamp(20px, 75%, 36px) ;
    }

    .dip-switch__toggle {
        left                    : 2px ;
        right                   : 2px ;
    }

}

@media (prefers-reduced-motion: reduce) {

    .dip-switch__toggle {
        transition-duration     : 1ms ;
    }

}

/* Audio Delay Calculator */

.audio-delay {
    max-width                   : 650px ;
}

.audio-delay__panel {
    padding                     : 0.85rem ;
}

.audio-delay__row {
    margin-bottom               : 8px ;
}

.audio-delay__input-group {
    display                     : flex ;
    align-items                 : center ;
    gap                         : 8px ;
}

.audio-delay__input-group .tool-input {
    max-width                   : 180px ;
}

.audio-delay__result {
    display                     : flex ;
    align-items                 : baseline ;
    gap                         : 8px ;
    margin                      : 5px 0 12px ;
    color                       : var(--dark-purple) ;
}

.audio-delay__result span {
    font-size                   : 3em ;
    font-weight                 : bold ;
    line-height                 : 1 ;
}

.audio-delay__panel hr {
    margin                      : 12px 0 ;
}

.audio-delay__result small {
    font-size                   : 1.2em ;
}

.audio-delay__distance-result {
    display                     : flex ;
    gap                         : 12px ;
    align-items                 : center ;
    margin                      : 6px 0 12px ;
    font-size                   : 1.4em ;
    color                       : var(--dark-purple) ;
}

.audio-delay__temperature {
    margin-top                  : 15px ;
}

.audio-delay__unit {
    white-space                 : nowrap ;
}

.audio-delay__environment {
    margin-top                  : 10px ;
}

.audio-delay__environment-title {
    margin-bottom               : 8px ;
    font-weight                 : bold ;
    color                       : var(--dark-purple) ;
}

.audio-delay__environment-grid {
    display                     : grid ;
    grid-template-columns       : repeat(3, minmax(0, 1fr)) ;
    gap                         : 15px ;
}

.audio-delay__environment-grid .tool-input {
    width                       : 100% ;
}

.audio-delay__speed {
    margin-top                  : 10px ;
}

@media (max-width: 650px) {

    .audio-delay__environment-grid {
        grid-template-columns   : 1fr ;
    }

}

/* =========================================================
   Power Quick Calc
   ========================================================= */

.power-calc {
    max-width                   : 720px ;
}

.power-calc__panel {
    padding                     : 0.85rem ;
}

.power-calc__convert-grid {
    align-items                 : end ;
    display                     : grid ;
    gap                         : 0.7rem ;
    grid-template-columns       : minmax(0, 1fr) auto minmax(0, 1fr) ;
}

.power-calc__input-unit {
    align-items                 : center ;
    display                     : flex ;
    gap                         : 0.45rem ;
}

.power-calc__input-unit span {
    color                       : var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-weight                 : 700 ;
    min-width                   : 1.2rem ;
}

.power-calc__equals {
    color                       : var(--dark-purple) ;
    font-size                   : 1.4rem ;
    font-weight                 : 700 ;
    padding-bottom              : 0.45rem ;
}

.power-calc__voltage {
    color                       : var(--grey) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.82rem ;
    margin-top                  : 0.45rem ;
}

.power-calc__panel hr {
    margin                      : 0.85rem 0 ;
}

.power-calc__section-title {
    color                       : var(--dark-purple) ;
    font-family                 : var(--merriweather-face), serif ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    margin-bottom               : 0.55rem ;
}

.power-calc__fixture-row {
    align-items                 : end ;
    display                     : grid ;
    gap                         : 0.65rem ;
    grid-template-columns       : 110px minmax(150px, 1fr) auto ;
    margin-bottom               : 0.85rem ;
}

.power-calc__add {
    min-width                   : 90px ;
}

.power-calc__loads {
    min-height                  : 6rem ;
}

.power-calc__total {
    background                  : #ffffff ;
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    display                     : grid ;
    gap                         : 0.7rem ;
    grid-template-columns       : 1fr 1fr ;
    margin-top                  : 0.7rem ;
    padding                     : 0.65rem 0.75rem ;
}

.power-calc__total div {
    display                     : flex ;
    flex-direction              : column ;
    gap                         : 0.12rem ;
}

.power-calc__total span {
    color                       : var(--grey) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.8rem ;
    font-weight                 : 700 ;
    text-transform              : uppercase ;
}

.power-calc__total strong {
    color                       : var(--dark-purple) ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 1.6rem ;
}

.power-calc__message {
    color                       : var(--dark-purple) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.82rem ;
    font-weight                 : 700 ;
    min-height                  : 1rem ;
    padding                     : 0.35rem 0 ;
}

.power-calc__clear {
    min-height                  : 2.2rem ;
}

.power-calc__disclaimer {
    border-top                  : 1px solid rgba(33, 71, 0, 0.35) ;
    color                       : #444444 ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.78rem ;
    line-height                 : 1.25 ;
    margin-top                  : 0.8rem ;
    padding-top                 : 0.65rem ;
}

@media (max-width: 560px) {

    .power-calc__convert-grid {
        grid-template-columns   : 1fr ;
    }

    .power-calc__equals {
        display                 : none ;
    }

    .power-calc__fixture-row {
        grid-template-columns   : 1fr 1fr ;
    }

    .power-calc__add {
        grid-column             : 1 / -1 ;
    }

    .power-calc__total {
        grid-template-columns   : 1fr ;
    }

}
/* =========================================================
   Power tools tabs / LED tape planner
   ========================================================= */

.power-tools-tabs {
    border-bottom               : 2px solid var(--dark-green) ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 0.35rem ;
    margin                      : 0.55rem 0.7rem 0 ;
}

.power-tools-tabs__tab {
    border                      : 2px solid var(--dark-green) ;
    border-bottom               : 0 ;
    border-radius               : 5px 5px 0 0 ;
    color                       : var(--dark-green) ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 0.88rem ;
    font-weight                 : 700 ;
    padding                     : 0.5rem 0.75rem ;
    text-decoration             : none ;
}

.power-tools-tabs__tab:hover,
.power-tools-tabs__tab--active {
    background                  : var(--dark-purple) ;
    border-color                : var(--dark-purple) ;
    color                       : #ffffff ;
}

.led-tape {
    max-width                   : 900px ;
}

.led-tape__panel {
    padding                     : 0.85rem ;
}

.led-tape__panel hr {
    margin                      : 0.95rem 0 ;
}

.led-tape__input-grid {
    display                     : grid ;
    gap                         : 0.7rem ;
    grid-template-columns       : repeat(4, minmax(0, 1fr)) ;
}

.led-tape__input-grid--inject {
    grid-template-columns       : minmax(220px, 360px) ;
}

.led-tape__results,
.led-tape__inject-results,
.led-tape__drop-results {
    background                  : #ffffff ;
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    display                     : grid ;
    gap                         : 0.7rem ;
    grid-template-columns       : repeat(4, minmax(0, 1fr)) ;
    margin-top                  : 0.8rem ;
    padding                     : 0.65rem 0.75rem ;
}

.led-tape__inject-results {
    grid-template-columns       : repeat(3, minmax(0, 1fr)) ;
}

.led-tape__results div,
.led-tape__inject-results div,
.led-tape__drop-results div {
    display                     : flex ;
    flex-direction              : column ;
    gap                         : 0.12rem ;
}

.led-tape__results span,
.led-tape__inject-results span,
.led-tape__drop-results span {
    color                       : var(--grey) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.78rem ;
    font-weight                 : 700 ;
    text-transform              : uppercase ;
}

.led-tape__results strong,
.led-tape__inject-results strong,
.led-tape__drop-results strong {
    color                       : var(--dark-purple) ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 1.25rem ;
}

.led-tape__positions {
    background                  : rgba(220, 255, 219, 0.45) ;
    border-left                 : 4px solid var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    line-height                 : 1.35 ;
    margin-top                  : 0.7rem ;
    padding                     : 0.6rem 0.7rem ;
}

@media (max-width: 760px) {

    .led-tape__input-grid,
    .led-tape__results,
    .led-tape__drop-results {
        grid-template-columns   : 1fr 1fr ;
    }

    .led-tape__inject-results {
        grid-template-columns   : 1fr ;
    }

}

@media (max-width: 500px) {

    .led-tape__input-grid,
    .led-tape__results,
    .led-tape__drop-results {
        grid-template-columns   : 1fr ;
    }

}