/**
 * assets/css/katakamuna-style.css
 * Icosmo Katakamuna - Sci-Fi Compact Dark UI v3.1.0
 *
 * CHANGES v3.1.0:
 * - Panel grid with one, two or four columns (no three-column stage).
 * - Symbol table fitted to its width by the app (font 8-20 px, equal gaps);
 *   duplicate column rules and the unused .color-dot removed.
 *
 * CHANGES v3.0.0:
 * - Panel system of the Icosmo Matrix Synth: 350 px panels on a grid.
 *   Player & mixer and Utah text one square panel each, Utah disc two panels
 *   wide and high, Amatsu grid two panels wide and as high as the grid
 *   (columns by container width, as in Icosmo Cymatics). The symbol table
 *   spans the full width of the panel grid.
 * - Player & mixer panel: miniature spectrum visualizer, slim square
 *   buttons, Icosmo Mixer faders (synth, male, female, master), BPM fader.
 * - Utah text in two columns, font fitted to the panel by the app.
 * - Removed: two-column row (.hd-ui-grid), segmented voice switch with its
 *   .voice-mode-btn buttons, form group of the old control panel, Utah info
 *   block.
 *
 * CHANGES v2.8.0:
 * - Loading overlay over the plugin (style of the Icosmo Matrix Synth loader).
 * - BPM fader with scale (long ticks every 10, short every 5, labels every
 *   50) and the current value beside it.
 *
 * CHANGES v2.7.0:
 * - Panel widths of the Icosmo Matrix Synth / Cymatics (350 px panels):
 *   wide containers show the player one panel wide and the Utah panel three
 *   panels wide; narrower ones keep the player at 350 px beside the Utah,
 *   small ones stack them.
 * - Plugin header removed.
 * - Transport icons at an equal 18 px; loop uses the standard repeat icon.
 *
 * CHANGES v2.6.0:
 * - Typography unified with the shared Icosmo UI: Arial base font, bold panel
 *   headings, muted labels, header as in Icosmo Human Design. Courier New
 *   remains only for numeric values (Hz, nm, CMYK).
 * - Sound row: TONE toggle and segmented VOICE switch (Off / Male / Female).
 * - Voice credits line.
 *
 * FIXES v2.5.0:
 * - Table columns now sized via <colgroup> (see katakamuna-app.js) instead
 *   of conflicting th/td width rules. This was the actual cause of the
 *   "invisible padding" pushing the NAME column under table-layout:fixed.
 * - Table column rules properly scoped under #katakamuna-container
 *   (previously leaking global styles onto the rest of the site).
 * - Table given a min-width + horizontal scroll on the wrapper instead of
 *   squeezing columns on narrow/mobile viewports.
 */

/* ── CONTAINER ───────────────────────────────────────────── */
#katakamuna-container {
    max-width: 1456px;                  /* 4 panels of 350 px + 3 gaps of 8 px + padding */
    margin: 20px auto;
    padding: 16px;
    color: #ccc;
    font-family: Arial, sans-serif;     /* same base font as the shared Icosmo UI */
    font-size: 15px;
    line-height: 1.5;
    background-color: transparent;
    box-sizing: border-box;
    container-type: inline-size;
    position: relative;
}

/* ── LOADING OVERLAY (style of the Icosmo Matrix Synth loader) ── */
#katakamuna-container .katakamuna-loader {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 140px;
    background-color: #111;
    border-radius: 6px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#katakamuna-container .katakamuna-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

#katakamuna-container .katakamuna-loader[hidden] {
    display: none;
}

#katakamuna-container .katakamuna-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;
}

#katakamuna-container .katakamuna-loader-bar {
    display: flex;
    gap: 3px;
    height: 20px;
    align-items: center;
}

#katakamuna-container .katakamuna-loader-bar span {
    display: block;
    width: 4px;
    height: 4px;
    background-color: #444;
    border-radius: 1px;
    opacity: 0;
    transform: scaleY(0.5);
    transition: height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

#katakamuna-container .katakamuna-loader-bar span.active {
    height: 20px;
    transform: scaleY(1);
    opacity: 1;
}

#katakamuna-container .katakamuna-loader-status {
    color: #ccc;
    font-size: 1.1em;
}

@keyframes katakamunaLoaderIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

#katakamuna-container .katakamuna-loader-status.ready {
    animation: katakamunaLoaderIn 0.5s ease-out forwards;
}

#katakamuna-container .katakamuna-loader-start {
    background-color: transparent !important;
    color: #999 !important;
    border: 1px solid #666 !important;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    animation: katakamunaLoaderIn 0.5s ease-out 0.3s forwards;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#katakamuna-container .katakamuna-loader-start:hover {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #888 !important;
}

#katakamuna-container .katakamuna-loader-start[hidden] {
    display: none;
}

/* ── PANEL GRID: panels of the Icosmo Matrix Synth (350 px) ──
   Columns follow the container width (as in Icosmo Cymatics): one, two
   or four (three would leave an empty column under the first row). From two
   columns on, player and text are one square panel, the disc two panels
   wide and high, the Amatsu grid two panels wide and as high as the grid
   itself; dense flow fills open places. */
#katakamuna-container .katakamuna-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row dense;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: center;
}

#katakamuna-container .katakamuna-layout > .module {
    margin: 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* The symbol table spans the full width of the panel grid */
#katakamuna-container #katakamuna-table-module {
    grid-column: 1 / -1;
}

@container (min-width: 716px) {
    #katakamuna-container .katakamuna-layout {
        grid-template-columns: repeat(2, 350px);
        align-items: start;
    }
    #katakamuna-container #katakamuna-player-module,
    #katakamuna-container #katakamuna-text-module {
        height: 350px;
    }
    #katakamuna-container #katakamuna-utah-visual-module {
        grid-column: span 2;
        grid-row: span 2;
        height: 708px;
    }
    #katakamuna-container #katakamuna-grid-module {
        grid-column: span 2;
    }
}

@container (min-width: 1424px) {
    #katakamuna-container .katakamuna-layout {
        grid-template-columns: repeat(4, 350px);
    }
}

/* ── MODULES ─────────────────────────────────────────────── */
/* Panel colours follow the Icosmo theme (Customizer); the Katakamuna typography and controls stay its own */
#katakamuna-container .module {
    background-color: var(--ic-surface, #141414);
    border: 1px solid var(--ic-border, #444444);
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: flex-start;
}

/* ── SECTION HEADING ─────────────────────────────────────── */
#katakamuna-container .control-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--ic-heading, #f0f0f0);
}

#katakamuna-container .header-meta-display {
    font-family: 'Courier New', monospace;
    font-size: 1em;
    color: #888;
    flex-grow: 1;
    text-align: center;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
#katakamuna-container .hd-ctrl-btn,
#katakamuna-container .grid-mode-btn {
    background: transparent !important;
    border: 1px solid #444 !important;
    border-radius: 3px !important;
    color: #888 !important;
    cursor: pointer;
    height: 28px;
    min-width: 32px;
    padding: 0 10px;
    font-size: 0.8em;
    font-family: inherit;
    font-weight: bold;
    box-shadow: none !important;
    transition: border-color 0.1s ease, color 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    line-height: 1;
}

#katakamuna-container .hd-ctrl-btn:hover,
#katakamuna-container .grid-mode-btn:hover {
    background: transparent !important;
    border-color: #777 !important;
    color: #ccc !important;
    box-shadow: none !important;
}

#katakamuna-container .hd-ctrl-btn.active,
#katakamuna-container .grid-mode-btn.active {
    background: transparent !important;
    border-color: #aaa !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Transport icons (play, repeat, continuous): one clear, equal size */
#katakamuna-container .hd-ctrl-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/* ── TRANSPORT ROW ───────────────────────────────────────── */
#katakamuna-container .katakamuna-ctrl-row {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 8px;
}

#katakamuna-container .grid-toggles {
    display: flex;
    gap: 5px;
}

/* ── FORM GROUPS ─────────────────────────────────────────── */
/* ── INLINE FADER ROW ────────────────────────────────────── */
#katakamuna-container .fader-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

#katakamuna-container .fader-row label {
    font-size: 0.75em;
    color: var(--ic-muted, #bdbdbd);
    white-space: nowrap;
    min-width: 32px;
}

/* ── BPM FADER WITH SCALE ────────────────────────────────── */
#katakamuna-container .bpm-row {
    align-items: flex-start;
}

#katakamuna-container .bpm-row label,
#katakamuna-container .bpm-row .fader-value {
    line-height: 16px;
}

#katakamuna-container .bpm-fader {
    flex: 1;
    min-width: 0;
}

/* The fader (and its thumb) lies above the scale that touches its track */
#katakamuna-container .bpm-fader input[type="range"] {
    position: relative;
    z-index: 1;
}

#katakamuna-container .fader-value {
    min-width: 2.2em;
    text-align: right;
    font-size: 0.75em;
    color: var(--ic-muted, #bdbdbd);
}

/* Ticks inset by the thumb radius so they line up with the thumb centre:
   long ticks every 10 BPM (30 steps), short ticks every 5 BPM (60 steps) */
#katakamuna-container .bpm-scale {
    position: relative;
    z-index: 0;
    height: 18px;
    margin: -9px 5px 0;                 /* ticks start right at the fader track */
    background-image:
        linear-gradient(to right, #777 1px, transparent 1px),
        linear-gradient(to right, #4a4a4a 1px, transparent 1px);
    background-size: calc(100% / 30) 7px, calc(100% / 60) 4px;
    background-repeat: repeat-x;
}

#katakamuna-container .bpm-scale::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    width: 1px;
    height: 7px;
    background: #777;
}

#katakamuna-container .bpm-scale span {
    position: absolute;
    top: 8px;
    transform: translateX(-50%);
    font-size: 0.6em;
    line-height: 1;
    color: #888;
}

/* ── SLIM FADERS ─────────────────────────────────────────── */
#katakamuna-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    width: 100%;
    height: 16px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

#katakamuna-container input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: #555;
    border-radius: 1px;
}

#katakamuna-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #aaa;
    margin-top: -4px;
    cursor: pointer;
    border: none;
    transition: background 0.1s ease;
}

#katakamuna-container input[type="range"]:hover::-webkit-slider-thumb {
    background: #eee;
}

#katakamuna-container input[type="range"]::-moz-range-track {
    height: 2px;
    background: #555;
    border-radius: 1px;
    border: none;
}

#katakamuna-container input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #aaa;
    border: none;
    cursor: pointer;
}

/* ── UTAH TEXT PANEL ─────────────────────────────────────── */
#katakamuna-container #katakamuna-text-module {
    gap: 0;
}

#katakamuna-container .utah-lines {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    column-count: 2;
    column-gap: 14px;
    column-fill: auto;
    color: #ccc;
    line-height: 1.45;
    font-size: 14px;
}

#katakamuna-container .utah-line {
    break-inside: avoid;
    white-space: nowrap;
}

/* ── LIVE META DISPLAY (compact) ─────────────────────────── */
#katakamuna-container .utah-live-meta {
    flex: none;
    margin-top: 6px;
    border-top: 1px solid #333;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#katakamuna-container .utah-live-meta .meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.35;
}

#katakamuna-container .utah-live-meta .meta-label {
    color: var(--ic-muted, #bdbdbd);
    font-size: 0.75em;
}

#katakamuna-container .utah-live-meta .meta-value {
    color: #ddd;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 0.95em;
}

/* ── STATUS TEXT ─────────────────────────────────────────── */
#katakamuna-container .status-text {
    flex: none;
    font-size: 0.7em;
    color: #888;
    font-style: italic;
    margin-top: 2px;
}

/* ── UTAH SPIRAL WRAPPER ─────────────────────────────────── */
#katakamuna-container #katakamuna-utah-spiral-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

/* The disc scales to the panel (the SVG keeps its square viewBox) */
#katakamuna-container #katakamuna-utah-spiral-wrapper svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* ── GRID MODULE: panel height follows the grid ──────────── */
#katakamuna-container #katakamuna-grid-wrapper {
    background: #0a0a0a;
    border-radius: 6px;
    border: 1px solid #333;
    padding: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    line-height: 0;
}

#katakamuna-container #katakamuna-grid-wrapper svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── DATA TABLE ───────────────────────────────────────────
 * Font size and column widths are fitted to the table width by
 * fitMasterTable() in katakamuna-app.js: the font as large as the width
 * allows (8-20 px), the remaining width shared equally by the columns.
 * Spacing is in em, so it scales with the font. Colours, borders and row
 * striping come from the shared Icosmo table design (class "icosmo-table"
 * in icosmo-ui.css).
 * ─────────────────────────────────────────────────────────── */
#katakamuna-container .table-wrapper {
    overflow-x: auto;
}

#katakamuna-container .katakamuna-data-table {
    width: 100%;
}

#katakamuna-container .katakamuna-data-table th,
#katakamuna-container .katakamuna-data-table td {
    padding: 0.3em 0.75em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#katakamuna-container .td-symbol { text-align: center; }
#katakamuna-container .td-name   { font-weight: 500; }
#katakamuna-container .td-cmyk,
#katakamuna-container .td-nm,
#katakamuna-container .td-freq   { font-family: 'Courier New', monospace; font-weight: bold; }

/* Symbol scaled with the table font */
#katakamuna-container .symbol-wrap {
    width: 2.1em;
    height: 2.1em;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

#katakamuna-container .symbol-wrap svg {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    overflow: hidden;
}

/* ── PLAYER & MIXER PANEL ────────────────────────────────── */
#katakamuna-container #katakamuna-player-module {
    gap: 6px;
}

#katakamuna-container #katakamuna-player-module > .control-group-heading {
    margin-bottom: 2px;
}

#katakamuna-container .heading-controls-right select {
    background-color: #0d0d0d;
    border: 1px solid #444;
    color: #ccc;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.95em;
    font-family: inherit;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    height: 24px;
    width: 120px;
}

/* Miniature spectrum (full width, low height as the synth's LFO displays) */
#katakamuna-container .katakamuna-visualizer {
    flex: none;
    height: 55px;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    background: #080808;
}

#katakamuna-container .katakamuna-visualizer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#katakamuna-container .player-buttons {
    flex: none;
    margin: 0;
    gap: 4px;
}

#katakamuna-container .player-buttons .hd-ctrl-btn {
    height: 26px;
    min-width: 26px;
    width: 26px;
    padding: 0;
}

#katakamuna-container .player-buttons-spacer {
    flex: 1;
}

#katakamuna-container .player-buttons .square-btn {
    font-size: 0.8em;
}

/* Icosmo Mixer faders (as in the Icosmo Matrix Synth and Cymatics) */
#katakamuna-container .mixer-faders-row {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 6px;
}

#katakamuna-container .mixer-fader-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    background-color: #111;
    padding: 5px 2px 4px;
    border-radius: 4px;
    border: 1px solid #333;
}

#katakamuna-container .mixer-fader-group label {
    font-size: 0.65em;
    color: #999;
    text-transform: uppercase;
    line-height: 1.1;
}

#katakamuna-container .mixer-fader-group .value-display {
    font-size: 0.62em;
    font-weight: 300;
    font-family: 'Arial Narrow', 'Helvetica Neue Condensed', 'Roboto Condensed', sans-serif;
    color: #aaa;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

#katakamuna-container input[type="range"].vertical-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-height: 0;
    width: 20px;
    height: auto;
    padding: 0;
    margin: 3px auto;
    background: transparent !important;
}

#katakamuna-container input[type="range"].vertical-slider::-webkit-slider-runnable-track {
    width: 7px;
    height: 100%;
    background: #5f5f5f;
    border-radius: 3px;
}

#katakamuna-container input[type="range"].vertical-slider::-moz-range-track {
    width: 7px;
    height: 100%;
    background: #5f5f5f;
    border-radius: 3px;
    border: none;
}

#katakamuna-container input[type="range"].vertical-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    width: 20px;
    background: #bdbdbd;
    border-radius: 3px;
    border: 1px solid #333;
    cursor: ns-resize;
    margin-top: 0;
    margin-left: -6.5px;
}

#katakamuna-container input[type="range"].vertical-slider::-moz-range-thumb {
    height: 10px;
    width: 20px;
    background: #bdbdbd;
    border-radius: 3px;
    border: 1px solid #333;
    cursor: ns-resize;
}

#katakamuna-container #katakamuna-player-module .bpm-row {
    flex: none;
    margin-bottom: 0;
}

/* ── CREDITS ─────────────────────────────────────────────── */
#katakamuna-container .katakamuna-credits {
    margin-top: 4px;
    text-align: center;
    font-size: 0.75em;
    color: #777;
}

/* ── RESPONSIVENESS ──────────────────────────────────────── */
@media (max-width: 900px) {
    #katakamuna-container .katakamuna-ctrl-row {
        flex-wrap: wrap;
    }
}