/* ============================================================
   WORD SORTER
   Page-specific styles
   ============================================================ */


/* ============================================================
   BASE PAGE
   ============================================================ */

html {
    margin: 0;
    padding: 0;
    border: none;
    font-family: Arial, sans-serif;
}


.word-sorter-page {
    width: 100%;
    padding: 105px 15px 30px;
    color: #333;
    font-family: Arial, sans-serif;
}


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


.word-sorter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.word-sorter-main {
    min-width: 0;
}


.word-sorter-tool-section {
    width: 100%;
}


.word-sorter-page button,
.word-sorter-page select,
.word-sorter-page textarea,
.word-sorter-page input {
    font-family: Arial, sans-serif;
}


.word-sorter-page a {
    color: #1155cc;
    text-decoration: none;
}


.word-sorter-page a:hover {
    text-decoration: underline;
}


/* ============================================================
   PAGE HEADING
   ============================================================ */

.word-sorter-heading {
    margin-bottom: 22px;
    text-align: center;
}


.word-sorter-heading h1 {
    margin: 0 0 10px;
    padding: 0;
    color: #333;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}


.word-sorter-intro {
    max-width: 720px;
    margin: 0 auto;
    color: #555;
    font-size: 17px;
    line-height: 1.55;
}


/* ============================================================
   TEXTAREA COLUMN TITLES
   ============================================================ */

.textarea-column-title {
    margin: 0 0 7px;
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}


/* ============================================================
   METRIC CARDS
   ============================================================ */

.primary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}


.results-metrics {
    margin-top: 14px;
    margin-bottom: 10px;
}


.metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
    border: 1px solid #d9dde3;
    border-radius: 9px;
    background: #fff;
}


.primary-metric {
    min-height: 105px;
    padding: 15px 10px;
}


.secondary-metric {
    min-height: 88px;
    padding: 12px 10px;
}


.metric-label {
    display: block;
    color: #555;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
}


.metric-value {
    display: block;
    max-width: 100%;
    margin-top: 7px;
    color: #1a73e8;
    font-size: 31px;
    line-height: 1.1;
    font-weight: 700;
}


.secondary-metric .metric-value {
    font-size: 23px;
}


/* ============================================================
   INPUT TEXTAREA
   ============================================================ */

.textarea-card {
    width: 100%;
}


.textarea-wrapper {
    position: relative;
    width: 100%;
}


#wordInput {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 300px;
    min-height: 150px;
    margin: 0;
    padding: 17px 18px;
    border: 2px solid #c9ced6;
    border-radius: 10px;
    background: #fff;
    color: #222;
    outline: none;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: "Anonymous Pro", monospace;
    font-size: 15px;
    line-height: 1.55;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


#wordInput:hover {
    border-color: #aeb4bd;
}


#wordInput:focus {
    border-color: #5f6368;
    box-shadow: 0 0 0 2px rgba(95, 99, 104, 0.08);
}


#wordInput::placeholder {
    color: #8a8f98;
    opacity: 1;
}


/* ============================================================
   TEXTAREA BUTTONS
   ============================================================ */

.textarea-actions {
    position: absolute;
    right: 20px;
    bottom: 11px;
    display: flex;
    align-items: center;
    gap: 7px;
}


.textarea-button {
    min-width: 66px;
    padding: 7px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: #fff !important;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.91;
    transition:
        opacity 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease;
}


.textarea-button:hover {
    opacity: 1;
    text-decoration: none;
}


.textarea-button:active {
    transform: translateY(1px);
}


.textarea-button:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}


.copy-button {
    background: #287a38;
}


.copy-button:hover {
    background: #216b30;
}


.copy-button.copied {
    background: #245f30;
}


/* ============================================================
   SORT SETTINGS CARD
   ============================================================ */

.sort-settings-card {
    width: 100%;
    margin-top: 10px;
    padding: 15px 16px;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    background: #fafafa;
}


.sort-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 24px;
    width: 100%;
}


.sort-setting {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}


.sort-setting-label {
    color: #444;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
}


#wordSort {
    min-width: 155px;
    padding: 8px 30px 8px 10px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    background: #fff;
    color: #333;
    outline: none;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
}


#wordSort:hover {
    border-color: #a8adb5;
}


#wordSort:focus {
    border-color: #666;
}


/* ============================================================
   SORT OPTIONS
   ============================================================ */

.sort-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 18px;
    min-width: 0;
}


.sort-checkbox-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #444;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
}


.sort-checkbox-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1a73e8;
    cursor: pointer;
}


/* ============================================================
   SORTED OUTPUT SECTION
   ============================================================ */

.sorted-output-section {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #d9dde3;
    border-radius: 10px;
    background: #fff;
}


/* ============================================================
   OUTPUT TEXTAREA
   ============================================================ */

.output-textarea-wrapper {
    position: relative;
    width: 100%;
}


#sortedOutput {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 260px;
    min-height: 140px;
    margin: 0;
    padding: 16px 17px 58px;
    border: 2px solid #d0d5dc;
    border-radius: 9px;
    background: #fafbfc;
    color: #222;
    outline: none;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: "Anonymous Pro", monospace;
    font-size: 15px;
    line-height: 1.55;
}


#sortedOutput:hover {
    border-color: #bcc2ca;
}


#sortedOutput:focus {
    border-color: #8b929c;
}


#sortedOutput::placeholder {
    color: #9298a1;
    opacity: 1;
}


.output-actions {
    right: 20px;
    bottom: 11px;
}


/* ============================================================
   OUTPUT FORMAT
   ============================================================ */

.output-format-settings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid #e0e3e7;
    border-radius: 7px;
    background: #fafafa;
}


.output-format-label {
    color: #444;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}


.output-format-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}


.output-format-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #444;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
}


.output-format-option input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1a73e8;
    cursor: pointer;
}


/* ============================================================
   WORD LENGTH METRICS
   ============================================================ */

.bottom-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 24px;
}


.bottom-metrics .secondary-metric {
    min-width: 0;
}


.bottom-metrics .metric-label {
    font-size: 14px;
}


.bottom-metrics .metric-value {
    font-size: 23px;
}


.word-value-metric {
    overflow: hidden;
}


.word-metric-value {
    width: 100%;
    max-width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    overflow-wrap: anywhere;
    word-break: normal;
}


/* ============================================================
   TOOL RECOMMENDATION BOXES
   ============================================================ */

.tool-recommendation {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #d6dde7;
    border-radius: 8px;
    background: #f7faff;
}


.tool-recommendation p {
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 1.55;
}


.secondary-recommendation {
    margin-top: 10px;
}


/* ============================================================
   INFORMATIONAL CONTENT
   ============================================================ */

.word-sorter-content {
    width: 100%;
    margin-top: 34px;
    color: #333;
    font-size: 17px;
    line-height: 1.7;
}


.word-sorter-content h2 {
    margin: 34px 0 12px;
    padding: 0;
    color: #292929;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
}


.word-sorter-content h2:first-child {
    margin-top: 0;
}


.word-sorter-content h3 {
    margin: 26px 0 9px;
    padding: 0;
    color: #333;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}


.word-sorter-content p {
    margin: 0 0 17px;
    padding: 0;
    color: #444;
    font-size: 17px;
    line-height: 1.7;
}


.word-sorter-content strong {
    color: #333;
}


.word-sorter-content a strong {
    color: inherit;
}


.word-sorter-content em {
    color: #444;
}


.word-sorter-content ol,
.word-sorter-content ul {
    margin: 8px 0 20px 28px;
    padding: 0;
    color: #444;
    list-style-position: outside;
}


.word-sorter-content ol {
    list-style-type: decimal;
}


.word-sorter-content ul {
    list-style-type: disc;
}


.word-sorter-content li {
    margin-bottom: 8px;
    padding-left: 3px;
    color: #444;
    font-size: 17px;
    line-height: 1.65;
}


.word-sorter-content ol li {
    list-style: decimal;
}


.word-sorter-content ul li {
    list-style: disc;
}


/* ============================================================
   RELATED TOOLS
   ============================================================ */

.related-tools-list {
    margin-top: 10px !important;
}


.related-tools-list li {
    margin-bottom: 9px;
}


/* ============================================================
   FAQ
   ============================================================ */

.faq-section {
    margin-top: 38px;
}


.faq-section > h2 {
    margin-bottom: 16px;
}


.faq-item {
    padding: 17px 0;
    border-bottom: 1px solid #e1e4e8;
}


.faq-item:first-of-type {
    border-top: 1px solid #e1e4e8;
}


.faq-item h3 {
    margin: 0 0 8px;
    color: #333;
    font-size: 18px;
    line-height: 1.4;
}


.faq-item p {
    margin: 0;
}


/* ============================================================
   BOTTOM TOOL LINK
   ============================================================ */

.bottom-tool-link {
    margin-top: 28px;
    padding: 15px 17px;
    border: 1px solid #d6dde7;
    border-radius: 8px;
    background: #f7faff;
}


.bottom-tool-link p {
    margin: 0;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.word-sorter-layout > #sidebar {
    width: 300px;
    min-width: 300px;
    min-height: 600px;
}


/* ============================================================
   LARGE SCREEN TWO-COLUMN WORKSPACE
   ============================================================ */

@media only screen and (min-width: 1151px) {

    .word-sorter-tool-section {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-areas:
            "heading heading"
            "input output"
            "settings outputformat"
            "results results"
            "length length"
            "recommendation-one recommendation-one"
            "recommendation-two recommendation-two";

        column-gap: 16px;
        row-gap: 0;
        align-items: start;
    }


    /* ========================================================
       HEADING
       ======================================================== */

    .word-sorter-heading {
        grid-area: heading;
    }


    /* ========================================================
       LEFT INPUT
       ======================================================== */

    .input-textarea-card {
        grid-area: input;
        min-width: 0;
        margin: 0;
    }


    .input-textarea-card .textarea-wrapper {
        width: 100%;
        margin: 0;
    }


    /* ========================================================
       RIGHT OUTPUT
       ======================================================== */

    .sorted-output-section {
        display: contents;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }


    /*
       Because display: contents removes the output section's
       visual box, its title and textarea are assigned to the
       right-hand grid area through the wrapper.
    */

    .sorted-output-section > .textarea-column-title {
        grid-area: output-title;
    }


    .output-textarea-wrapper {
        grid-area: output;
        width: 100%;
        min-width: 0;
        margin: 0;
    }


    /* ========================================================
       MAKE BOTH COLUMN TITLES IDENTICAL
       ======================================================== */

    .input-textarea-card .textarea-column-title,
    .sorted-output-section > .textarea-column-title {
        margin: 0 0 7px;
        color: #444;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;
    }


    /*
       The output title lives inside a display:contents parent.
       Position it directly above the output textarea.
    */

    .sorted-output-section > .textarea-column-title {
        position: absolute;
        visibility: hidden;
    }


    /*
       Use a pseudo-label on the output wrapper so both labels
       occupy identical space and the two textareas stay flush.
    */

    .output-textarea-wrapper::before {
        content: "Sorted Words";
        display: block;
        margin: 0 0 7px;
        color: #444;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;
    }


    /* ========================================================
       EXACTLY MATCH INPUT / OUTPUT TEXTAREAS
       ======================================================== */

    #wordInput,
    #sortedOutput {
        width: 100%;
        max-width: 100%;
        height: 330px;
        min-height: 150px;
        margin: 0;
        border: 2px solid #c9ced6;
        border-radius: 10px;
        background: #fff;
        color: #222;
        font-family: "Anonymous Pro", monospace;
        font-size: 15px;
        line-height: 1.55;
    }


    #wordInput {
        padding: 17px 18px;
    }


    #sortedOutput {
        padding: 17px 18px 58px;
    }


    #wordInput:hover,
    #sortedOutput:hover {
        border-color: #aeb4bd;
    }


    #wordInput:focus,
    #sortedOutput:focus {
        border-color: #5f6368;
        box-shadow: 0 0 0 2px rgba(95, 99, 104, 0.08);
    }


    /* ========================================================
       LEFT SORT SETTINGS
       ======================================================== */

    .sort-settings-card {
        grid-area: settings;
        width: 100%;
        min-width: 0;
        margin-top: 10px;
    }


    .sort-settings-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }


    .sort-setting {
        width: 100%;
    }


    .sort-method-setting {
        justify-content: space-between;
    }


    #wordSort {
        flex: 1;
        max-width: 220px;
    }


    .sort-options {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: flex-start;
        gap: 9px;
        width: 100%;
    }


    /* ========================================================
       RIGHT OUTPUT FORMAT
       ======================================================== */

    .output-format-settings {
        grid-area: outputformat;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
        padding: 15px 16px;
        border: 1px solid #dde1e6;
        border-radius: 8px;
        background: #fafafa;
    }


    .output-format-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        width: 100%;
    }


    /* ========================================================
       METRICS
       ======================================================== */

    .results-metrics {
        grid-area: results;
    }


    .bottom-metrics {
        grid-area: length;
    }


    /* ========================================================
       RECOMMENDATIONS
       ======================================================== */

    .tool-recommendation {
        grid-area: recommendation-one;
    }


    .tool-recommendation.secondary-recommendation {
        grid-area: recommendation-two;
    }

}


/* ============================================================
   MEDIUM SCREENS
   ============================================================ */

@media only screen and (max-width: 1150px) {

    .word-sorter-page {
        padding-left: 12px;
        padding-right: 12px;
    }


    .word-sorter-heading h1 {
        font-size: 29px;
    }


    .word-sorter-intro {
        font-size: 16px;
    }


    .primary-metrics {
        gap: 8px;
    }


    .primary-metric {
        min-height: 96px;
        padding: 12px 7px;
    }


    .metric-label {
        font-size: 13px;
    }


    .metric-value {
        font-size: 27px;
    }


    #wordInput {
        height: 270px;
        min-height: 135px;
        padding: 17px 18px;
        font-size: 15px;
    }


    .sort-settings-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }


    .sort-options {
        justify-content: flex-start;
        width: 100%;
    }


    .sorted-output-section {
        padding: 18px 14px;
    }


    #sortedOutput {
        height: 240px;
        min-height: 130px;
    }


    .word-sorter-content {
        font-size: 16px;
    }


    .word-sorter-content p,
    .word-sorter-content li {
        font-size: 16px;
    }


    .word-sorter-content h2 {
        font-size: 23px;
    }


    .word-sorter-content h3 {
        font-size: 19px;
    }

}


/* ============================================================
   BELOW SIDEBAR BREAKPOINT
   ============================================================ */

@media only screen and (max-width: 992px) {

    .word-sorter-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 900px;
    }


    .word-sorter-layout > #sidebar {
        display: none;
    }


    .word-sorter-page {
        padding-top: 100px;
    }

}


/* ============================================================
   TABLET / SMALLER SETTINGS
   ============================================================ */

@media only screen and (max-width: 700px) {

    .sort-setting {
        width: 100%;
    }


    .sort-method-setting {
        justify-content: space-between;
    }


    #wordSort {
        flex: 1;
        max-width: 230px;
    }


    .sort-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .output-format-settings {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }


    .output-format-options {
        gap: 10px 16px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media only screen and (max-width: 550px) {

    .word-sorter-page {
        padding-top: 92px;
        padding-left: 10px;
        padding-right: 10px;
    }


    .word-sorter-heading {
        margin-bottom: 18px;
    }


    .word-sorter-heading h1 {
        font-size: 27px;
    }


    .word-sorter-intro {
        font-size: 15px;
        line-height: 1.5;
    }


    .textarea-column-title {
        margin-bottom: 6px;
        font-size: 13px;
    }


    /* ========================================================
       INPUT
       ======================================================== */

    #wordInput {
        height: 235px;
        min-height: 120px;
        padding: 14px 13px;
        border-radius: 8px;
        font-size: 15px;
        line-height: 1.5;
    }


    /* ========================================================
       SORT SETTINGS
       ======================================================== */

    .sort-settings-card {
        margin-top: 8px;
        padding: 12px 11px;
    }


    .sort-settings-row {
        gap: 12px;
    }


    .sort-setting {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }


    .sort-method-setting {
        justify-content: flex-start;
    }


    .sort-setting-label {
        font-size: 13px;
    }


    #wordSort {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 13px;
    }


    .sort-options {
        gap: 9px;
    }


    .sort-checkbox-option {
        font-size: 13px;
    }


    .sort-checkbox-option input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }


    /* ========================================================
       SORTED OUTPUT
       ======================================================== */

    .sorted-output-section {
        margin-top: 16px;
        padding: 15px 10px;
        border-radius: 8px;
    }


    #sortedOutput {
        height: 220px;
        min-height: 115px;
        padding: 14px 13px 55px;
        border-radius: 8px;
        font-size: 15px;
        line-height: 1.5;
    }


    .textarea-actions {
        right: 17px;
        bottom: 9px;
        gap: 6px;
    }


    .textarea-button {
        min-width: 59px;
        padding: 6px 10px;
        font-size: 12px;
    }


    .output-actions {
        right: 17px;
        bottom: 9px;
    }


    /* ========================================================
       OUTPUT FORMAT
       ======================================================== */

    .output-format-settings {
        margin-top: 8px;
        padding: 10px 11px;
    }


    .output-format-label {
        font-size: 13px;
    }


    .output-format-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }


    .output-format-option {
        font-size: 13px;
    }


    .output-format-option input[type="radio"] {
        width: 15px;
        height: 15px;
    }


    /* ========================================================
       WORD / CHARACTER METRICS
       ======================================================== */

    .results-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 12px;
        margin-bottom: 8px;
    }


    .results-metrics .primary-metric {
        min-height: 88px;
        padding: 10px 4px;
        border-radius: 7px;
    }


    .results-metrics .metric-label {
        font-size: 11.5px;
        line-height: 1.25;
    }


    .results-metrics .metric-value {
        margin-top: 6px;
        font-size: 24px;
    }


    /* ========================================================
       WORD LENGTH METRICS
       ======================================================== */

    .bottom-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 0;
        margin-bottom: 20px;
    }


    .bottom-metrics .secondary-metric {
        min-height: 78px;
        padding: 9px 5px;
    }


    .bottom-metrics .metric-label {
        font-size: 11.5px;
        line-height: 1.25;
    }


    .bottom-metrics .metric-value {
        font-size: 20px;
    }


    .bottom-metrics .word-metric-value {
        font-size: 16px;
        line-height: 1.2;
    }


    /* ========================================================
       RECOMMENDATIONS
       ======================================================== */

    .tool-recommendation {
        margin-top: 15px;
        padding: 12px 13px;
    }


    .secondary-recommendation {
        margin-top: 8px;
    }


    .tool-recommendation p {
        font-size: 14px;
    }


    /* ========================================================
       CONTENT
       ======================================================== */

    .word-sorter-content {
        margin-top: 28px;
    }


    .word-sorter-content h2 {
        margin-top: 29px;
        font-size: 22px;
    }


    .word-sorter-content h3 {
        margin-top: 22px;
        font-size: 18px;
    }


    .word-sorter-content p,
    .word-sorter-content li {
        font-size: 16px;
        line-height: 1.65;
    }


    .word-sorter-content ol,
    .word-sorter-content ul {
        margin-left: 23px;
    }


    .faq-item {
        padding: 15px 0;
    }


    .faq-item h3 {
        font-size: 17px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media only screen and (max-width: 390px) {

    .word-sorter-page {
        padding-left: 8px;
        padding-right: 8px;
    }


    #wordInput,
    #sortedOutput {
        font-size: 15px;
    }


    .textarea-button {
        min-width: 55px;
        padding-left: 8px;
        padding-right: 8px;
    }


    .sort-settings-card {
        padding-left: 9px;
        padding-right: 9px;
    }


    .sort-setting-label,
    .sort-checkbox-option,
    .output-format-label,
    .output-format-option {
        font-size: 12.5px;
    }


    .sorted-output-section {
        padding-left: 8px;
        padding-right: 8px;
    }


    /* ========================================================
       WORD / CHARACTER METRICS
       ======================================================== */

    .results-metrics {
        gap: 4px;
    }


    .results-metrics .primary-metric {
        min-height: 82px;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 6px;
    }


    .results-metrics .metric-label {
        font-size: 10.5px;
    }


    .results-metrics .metric-value {
        font-size: 22px;
    }


    /* ========================================================
       WORD LENGTH METRICS
       ======================================================== */

    .bottom-metrics {
        gap: 4px;
    }


    .bottom-metrics .secondary-metric {
        min-height: 74px;
        padding-left: 3px;
        padding-right: 3px;
    }


    .bottom-metrics .metric-label {
        font-size: 10.5px;
    }


    .bottom-metrics .metric-value {
        font-size: 18px;
    }


    .bottom-metrics .word-metric-value {
        font-size: 14px;
    }

}