/*
 * Constructor skin. Loaded AFTER alpha.css on purpose: that file is the 2014 original, kept
 * byte-identical because alpha1.js depends on its geometry, and equal-specificity rules only win
 * when they come later.
 *
 * Presentation only. Every id and class the JS and the inline onclick= handlers touch stays
 * exactly as it was — this file restyles them, it never renames them.
 */

/* The tool is a workspace, not a page layout. Past ~880px the panels stop reading as one unit:
   the colour swatches and the mode switch end up at opposite ends of the screen. */
.cn-page { max-width: 880px; margin-inline: auto; }
/* Inside the tool's own column the prose aligns with the panels; it must not re-centre itself. */
.cn-page .prose { margin-inline: 0; }
.post-inner { max-width: 880px; }

.cn-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    margin: 20px 0 14px;
}
.cn-tools { margin-top: 16px; }

.cn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.cn-tools .cn-row + .cn-row { border-top: 1px solid var(--line); }

.cn-label {
    flex: 0 0 62px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--muted);
}

.cn-row label, .cn-group {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--muted);
}

.cn-hint { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cn-actions { gap: 8px; }
/* "Очистить" is the destructive one: it sits apart from the two it could be mistaken for. */
.cn-actions .cn-quiet { margin-left: auto; }
.cn-size-note { flex: 1 1 100%; font-size: 12px; line-height: 1.4; color: var(--muted); }

/* Between the colours and the grid. Usually empty, and an empty flex box has no height, so the
   two panels keep the gap they had. */
.cn-gridbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cn-gridbar .cn-hint { margin: 0 2px; flex: 1 1 160px; }
.cn-hint-top { display: none; }
/* With the switch out, the drawing hint has done its job; two rows above the grid is one too many. */
.cn-gridbar.has-pan .cn-hint-top, .cn-gridbar.has-note .cn-hint-top { display: none; }

/* ---------------------------------------------------------------- colours, the top of the tool */
.cn-colours { padding-bottom: 8px; }
.cn-swatch { flex-direction: column; gap: 4px !important; font-size: 11px; }
#colorSelector, #backcolorSelector {
    float: none !important; padding: 0 !important;
    display: block; width: 46px !important; height: 46px !important;
    /* One step darker than --line: a white swatch on the white card had no edge at all. */
    border: 2px solid #D9CCBF; border-radius: var(--radius-control);
    overflow: hidden; cursor: pointer;
    box-shadow: 0 1px 2px rgba(38, 32, 28, 0.06);
}
/* Which of the two the grid is being painted with right now. */
.cn-swatch-on #colorSelector, .cn-swatch-on #backcolorSelector {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}
.cn-swatch-on > span { color: var(--ink); font-weight: 600; }
/* The system colour picker's anchor on phones: parked over the tapped control by the script,
   never seen, never focused. */
.cn-native-colour {
    position: fixed; left: 0; top: 0; width: 44px; height: 44px;
    margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none;
}
#colorSelector:hover, #backcolorSelector:hover { border-color: var(--accent); }
#colorSelector > div, #backcolorSelector > div { display: block; width: 100%; height: 100%; }
/* CP4.png is the picker's trigger graphic; the colour is the box behind it. */
#colorSelector img, #backcolorSelector img { display: none; }

/* A segmented control reads as one choice, unlike two loose buttons. */
.cn-seg[hidden] { display: none; }
.cn-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg); }
.cn-seg input { border: 0 !important; background: none !important; border-radius: 999px !important; height: 38px !important; font-size: 13px !important; }
/* More specific than ".cn-seg input", which sets background:none — otherwise the active pill
   ends up white text on a white ground, i.e. invisible. */
.cn-seg input.cn-mode-on, .cn-sticky button.cn-mode-on {
    background: var(--ink) !important; color: #fff !important;
}
/* Draw / pan: the same control, a size down, on the right above the grid it governs. */
.cn-pan { margin-left: auto; }
.cn-pan input { height: 36px !important; }

.cn-presets-row { gap: 12px; align-items: center; padding-bottom: 2px; }
#cn-presets { display: flex; flex-wrap: wrap; gap: 7px; flex: 1 1 auto; }
.cn-preset {
    width: 32px; height: 32px; padding: 0;
    border: 1px solid rgba(38, 32, 28, 0.24); border-radius: 10px; cursor: pointer;
}
.cn-preset:hover { transform: scale(1.08); }
.cn-preset-on { box-shadow: 0 0 0 2px var(--ink); }

/* Recent colours. alpha.css gives the strip a 250px width, a 110px left margin, a 50px height and
   a 3px grey border on every cell — 2014 geometry that left the cells as tall grey-rimmed pills. */
#pals { flex: 0 0 auto; width: auto; margin: 0; }
#pals table { border-spacing: 5px; margin: 0 -5px; height: auto; }
#pals td, #pals td:hover {
    width: 28px; min-width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 8px; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(38, 32, 28, 0.24);
}

/* ---------------------------------------------------------------- the grid, the hero */
#canvas {
    background-color: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-card);
    width: auto !important; max-width: 100%;
    padding: 16px; overflow: auto;
    /* A block, not a centring flex row: flex centring pushes the left half of a too-wide grid to
       a negative offset, where no scrollbar can reach it. Auto margins centre a narrow table and
       collapse to zero for a wide one, which then starts at the left edge and scrolls. */
    display: block;
}
#canvas table { margin: 0 auto; }
/*
 * The grid lines. alpha.css paints them with "#table1 { background-color: #555 }", and
 * renderSchema() in alpha1.js READS that computed colour for the lines of the exported PNG. So the
 * colour stays what it was — the download is unchanged — and a flat image is laid over it for the
 * screen only: warm and light, so the drawing is the darkest thing in the frame, not the mesh.
 */
#table1 { background-image: linear-gradient(#D9CCBF, #D9CCBF); outline: 1px solid var(--muted); }
/* A finger dragging across the grid must not select text... */
#canvas, #canvas table, #canvas td { -webkit-user-select: none; user-select: none; }
/* ...or scroll the page. On the TABLE only: the frame's padding around it still scrolls. */
#canvas table, #canvas td { touch-action: none; }
/* "двигать": the finger scrolls the frame and the page, and the script paints nothing. */
#canvas.is-pan table, #canvas.is-pan td { touch-action: pan-x pan-y; }

/* ---------------------------------------------------------------- controls
   Three weights, so the eye can tell the one action that matters from the rest:
     .cn-primary   filled accent  — the thing you came here to do
     .cn-secondary outlined       — useful, frequent, reversible
     .cn-quiet     borderless     — rare and destructive, deliberately unattractive
   A row of identically-styled pills makes every choice look equally important, which is the same
   as making none of them look important. */
.post-inner input[type="number"], .post-inner input[type="text"] {
    height: 44px; width: 78px; padding: 0 8px 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius-small);
    background: var(--bg); color: var(--ink);
    font: 600 16px var(--text);
}

/* An id selector, because alpha.css's "#manipulators { margin: 10px 0 }" outranks any class and
   would zero the auto margin — the zoom pair would then sit glued to "ширина" and read as if ±
   belonged to that field, which is the very ambiguity the removed nudge buttons had. */
#manipulators.cn-zoom { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; }
.cn-zoom-label { font-size: 13px; color: var(--muted); }
.post-inner input[type="button"] {
    height: 44px; padding: 0 16px;
    border-radius: var(--radius-small);
    font: 600 15px var(--text); cursor: pointer;
    border: 1px solid transparent; background: none; color: var(--ink);
}
.post-inner input.cn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
    padding: 0 20px; box-shadow: 0 1px 2px rgba(196, 85, 58, 0.25);
}
.post-inner input.cn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.post-inner input.cn-secondary { background: var(--bg); border-color: var(--line); }
.post-inner input.cn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.post-inner input.cn-quiet { color: var(--muted); padding: 0 10px; }
.post-inner input.cn-quiet:hover { color: var(--accent-dark); }

/* After the generic button rule on purpose: equal specificity, so order decides. */
.post-inner input.cn-icon {
    width: 40px; min-width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--bg); color: var(--ink);
    font: 600 18px var(--text); line-height: 1; cursor: pointer;
}
.post-inner input.cn-icon:hover { border-color: var(--accent); color: var(--accent); }
#cn-undo[disabled] { opacity: 0.4; cursor: default; }
#cn-restored { color: var(--accent-dark); }

/* ---------------------------------------------------------------- the exported schema
   Nothing until there is one: #saving is visibility:hidden until alpha1's save() reveals it, and
   used to hold an empty line open between the intro and the how-to. The class is set by
   cnDownload(); the :has() half covers save() being called any other way. */
.cn-result:not(.is-ready):not(:has(#schema-result[src])) { display: none; }
.cn-result {
    margin-top: 22px; padding: 16px 18px 18px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow-md);
    /* cnDownload() scrolls here; the site header is sticky and 65px tall. */
    scroll-margin-top: 81px;
}
/* Under the ad the gap is the header's height plus the usual one. cnDownload() used to leave the
   ad wholly ABOVE the window; with the scroll-margin alone its last 40px would sit behind the
   translucent header instead. This keeps the old guarantee: after a tap on "скачать" no part of
   the ad is inside the window. */
.cn-ad + .cn-result { margin-top: 84px; }
#saving { margin: 0 0 12px; font: 700 19px/1.3 var(--text); color: var(--ink); }
/* A 10x40 pattern keeps its real size and scrolls; shrunk to the column it was a 40px strip. */
#rdy { overflow-x: auto; }
#rdy img:not([src]) { display: none; }
#rdy img { display: block; max-width: none; }

/* ---------------------------------------------------------------- the desktop colour dialog
   colorpicker.css is the 2009 original and positions every part absolutely inside 356x176, so
   only the skin changes here: no size, no offset. */
.colorpicker {
    z-index: 40;
    background-color: var(--ink);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-lg), 0 2px 8px rgba(38, 32, 28, 0.25);
}
.colorpicker input { font-family: var(--text); color: #cfc4ba; }
.colorpicker_color, .colorpicker_new_color, .colorpicker_current_color { border-radius: 4px; }

/* ---------------------------------------------------------------- phone: the tools follow you */
.cn-sticky { display: none; }

.cn-intro { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 680px) {
    /* "Правая кнопка мыши" is noise on a phone. */
    .cn-mouse-only { display: none; }

    .cn-label { flex-basis: 100%; }
    .cn-seg { margin-left: 0; }
    .cn-preset { width: 44px; height: 44px; border-radius: var(--radius-small); }   /* the floor is 44, and 42 is not 44 */
    #canvas { padding: 10px; margin-top: 6px; }
    .post-inner { padding-bottom: 76px; }       /* room for the bar below */

    /* How to draw, in one line ABOVE the grid — under it, the sentence was under the thumb. The
       two margins are trimmed so the grid moves down by about 20px, not by the line plus a gap. */
    #pals td, #pals td:hover { width: 36px; min-width: 36px; height: 36px; border-radius: 10px; }
    .cn-hint-top { display: block; }
    .cn-gridbar.has-pan .cn-hint-top, .cn-gridbar.has-note .cn-hint-top { display: none; }
    .cn-hint-draw { display: none; }
    .cn-colours { margin-bottom: 10px; }

    /* The download is the whole row; undo and clear share the next one, at opposite ends. */
    .cn-actions .cn-primary { flex: 1 1 100%; }

    /* Off until the script says the colours have scrolled away and the grid is on screen — see
       syncSticky() in constructor-extras.js. Hidden means hidden: no hit-testing, no focus. */
    .cn-sticky {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        display: flex; align-items: center; gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(251, 246, 240, 0.96);
        backdrop-filter: blur(8px);
        box-shadow: 0 -10px 24px -14px rgba(38, 32, 28, 0.35);
        visibility: hidden; opacity: 0; transform: translateY(110%); pointer-events: none;
        transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
    }
    .cn-sticky.is-on {
        visibility: visible; opacity: 1; transform: none; pointer-events: auto;
        transition: transform .2s ease, opacity .2s ease;
    }
    .cn-sticky button {
        flex: 0 1 auto; min-width: 0;
        height: 44px; padding: 0 12px;
        border: 1px solid var(--line); border-radius: var(--radius-small);
        background: var(--surface); color: var(--ink);
        font: 600 14px var(--text); cursor: pointer;
    }
    /* More specific than ".cn-seg input", which sets background:none — otherwise the active pill
       ends up white text on a white ground, i.e. invisible. */
    .cn-seg input.cn-mode-on, .cn-sticky button.cn-mode-on {
        background: var(--ink) !important; color: #fff !important;
    }
    /* A fixed basis: as a plain flex item it was squeezed to 21px on a 360px screen. */
    .cn-sticky-swatch { flex: 0 0 44px !important; width: 44px; padding: 0 !important; border: 2px solid #D9CCBF !important; }
    .cn-sticky-primary {
        margin-left: auto;
        background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
    }
}

/* The how-to under the tool: reading text, so it takes the reading column's measure, not the
   880px of the grid. */
/* No rule of its own above it: the intro's hairline, a few lines up, already ends the tool, and a
   second one right under a three-line paragraph read as a box drawn around that paragraph. */
.cn-help { max-width: var(--w-text); margin-top: 30px; }
.cn-help h2 { margin-top: 26px; }
.cn-help h2:first-child { margin-top: 0; }
.cn-help h3 { margin: 18px 0 6px; font-size: 17px; }
.cn-help ol { padding-left: 22px; }
.cn-help li { margin-bottom: 8px; }