/*
 * font-tester.css
 * Pages: webdev-tools/font-preview-and-test.php
 * Purpose: Modern two-column "font studio" workspace: a controls sidebar
 *          (Font dropzone + Sample text + Typography + Colors setting cards)
 *          and an Output/preview column of specimen panels. Includes the
 *          styled range sliders, color swatch/hex inputs, preset swatches,
 *          contrast badge, action buttons and gray size-scale labels.
 * Load order: loaded AFTER assets/css/tool-input.css (referenced via $extraCss
 *             on the page). It only adds tool-specific classes, so it does not
 *             conflict with the shared tool styles.
 *
 * Design tokens (keep in sync with tool-input.css):
 *   --ft-green:  #168332   brand accent (same green family as tool buttons)
 *   --ft-hover:  #159937   darker green on hover (same as tool buttons)
 *   --ft-border: #e4ebf1   soft card border
 *   --ft-bg:     #f5f7fa   workspace background
 *   --ft-ink:    #1f2937   primary text
 */

/* ======================= Workspace layout ======================= */

.ft-workspace {
    background: #f5f7fa;
    border: 1px solid #e4ebf1;
    border-radius: 16px;
    padding: 24px 18px 14px;
    margin: 18px auto;
    box-shadow: 0 4px 20px rgba(15, 30, 42, 0.06);
    max-width: 1240px;
}

.ft-workspace-head {
    text-align: center;
    margin-bottom: 20px;
}
/* ======================= Cards ======================= */

.ft-card {
    background: #ffffff;
    border: 1px solid #e4ebf1;
    border-radius: 14px;
    padding: 15px 16px 13px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.03);
}

.ft-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f5;
}

.ft-card-ico {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f4ec;
    color: #168332;
    border-radius: 9px;
    font-size: 0.95rem;
}

.ft-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #237a3a;
    margin: 0;
}

/* ======================= Buttons ======================= */

.ft-btn {
    border: none;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ft-btn-ghost {
    background: #ffffff;
    color: #168332;
    border: 1px solid #bfdcc9;
}

.ft-btn-ghost:hover {
    background: #eef8f1;
    border-color: #8fd1a9;
    color: #159937;
}

.ft-btn-xs {
    padding: 4px 10px;
    font-size: 0.8rem;
    background: #168332;
    color: #ffffff;
}

.ft-btn-xs:hover {
    background: #159937;
    color: #ffffff;
}

/* ======================= Drop zone / file chip ======================= */

.ft-dropzone {
    display: block;
    border: 2px dashed #c6d3df;
    border-radius: 12px;
    background: #fbfcfe;
    text-align: center;
    padding: 22px 12px 18px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.ft-dropzone:hover,
.ft-dropzone.is-drag {
    border-color: #168332;
    background: #effaf3;
}

.ft-dropzone-ico {
    color: #168332;
    font-size: 1.75rem;
    opacity: 0.85;
}

.ft-dropzone-text {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 8px 0 12px;
}

.ft-file-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0faf3;
    border: 1px solid #bfdfcb;
    border-radius: 12px;
    padding: 9px 12px;
}

.ft-file-chip > i.fa-font {
    color: #168332;
}

.ft-file-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ======================= Sample text ======================= */

.ft-sample-text {
    width: 100%;
    min-height: 118px;
    resize: vertical;
    border: 1px solid #d6dde5;
    border-radius: 10px;
    padding: 12px;
    font-size: 0.98rem;
    color: #1f2937;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ft-sample-text:focus {
    outline: none;
    border-color: #168332;
    box-shadow: 0 0 0 0.25rem rgba(27, 138, 67, 0.12);
}

.ft-char-count {
    font-size: 0.78rem;
    color: #8a919c;
    text-align: right;
    margin: 6px 2px 0;
}

/* ======================= Typography fields ======================= */

.ft-field {
    margin-bottom: 13px;
}

.ft-field > label,
.ft-color-row label {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    color: #4b5563;
    margin-bottom: 6px;
}

.ft-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ft-range {
    flex: 1;
    min-width: 0;
    accent-color: #168332;
    margin: 0;
}

.ft-num {
    width: 76px;
    flex: 0 0 76px;
    text-align: center;
    border-radius: 9px;
    border-color: #d6dde5;
}

.form-select {
    border-radius: 9px;
    border-color: #d6dde5;
    font-size: 0.92rem;
}

.form-select:focus,
.form-control:focus {
    border-color: #168332;
    box-shadow: 0 0 0 0.25rem rgba(27, 138, 67, 0.12);
}

.ft-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ======================= Colors ======================= */

.ft-color-row {
    margin-bottom: 13px;
}

.ft-color-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-swatch {
    width: 46px;
    height: 38px;
    flex: 0 0 46px;
    padding: 2px;
    border: 1px solid #d6dde5;
    border-radius: 9px;
    cursor: pointer;
}

.ft-hex {
    flex: 1;
    text-transform: uppercase;
    font-family: Consolas, Menlo, monospace;
    font-size: 0.88rem;
    border-radius: 9px;
    border-color: #d6dde5;
    min-width: 0;
}

.ft-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 8px;
}

.ft-preset-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8a919c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

.ft-swatch-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid #ffffff;
    background-color: #ffffff; /* neutralize the shared green button bg */
    box-shadow: 0 0 0 1px #d6dde5;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s;
}

.ft-swatch-btn span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.ft-swatch-btn:hover {
    transform: scale(1.14);
}

/* Contrast badge in the Colors card header */
.ft-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

.ft-badge-good {
    background: #e7f4ec;
    color: #168332;
}

.ft-badge-bad {
    background: #fdecea;
    color: #b02a37;
}

/* ======================= Action bars & result message ======================= */

/* .result-message base (text-align:center, green) comes from tool-input.css —
   only reset spacing here for the controls column. */
.ft-controls .result-message {
    margin: 4px 0 8px;
    font-size: 0.9rem;
}

.ft-actionbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 2px 0 6px;
}

.ft-actionbar-right {
    justify-content: flex-end;
}

/* ======================= Output column / specimen panels ======================= */

.ft-output-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ft-output-head .ft-card-title {
    font-size: 1.15rem;
}

.ft-panel {
    background: #ffffff;
    border: 1px solid #e4ebf1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}

.ft-panel-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #eef2f5;
    font-weight: 700;
    font-size: 0.9rem;
    color: #16301f;
}

.ft-panel-head i {
    color: #168332;
    font-size: 0.85rem;
}

/* Preview surfaces — JS sets fontFamily/size/color/weight etc. on these. */
.ft-preview-main {
    padding: 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ft-preview-specimen {
    padding: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ft-size-scale {
    padding: 16px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Grayish px labels inside the size-scale waterfall */
.scale-size {
    color: #8a919f;
}

/* ======================= Output action icons ======================= */

/* Styling comes from the shared utilities in the markup (.icon-design sizing
   in tool-input.css, .text-blue color in templatemo.css). No overrides here. */

/* ======================= Responsive ======================= */

/* Keep the settings column visible while scrolling the preview on desktop */
@media (min-width: 992px) {
    .ft-controls {
        position: sticky;
        top: 12px;
        align-self: flex-start;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        padding-right: 6px;
    }
}

@media (max-width: 575px) {
    .ft-slider-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .ft-num {
        width: 100%;
        flex: auto;
    }

    .ft-grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.text-content li {
    font-size: 18px;
}