/* =============================================================
   BOWIE LYRICS CUTTER - the workbench
   Loads on top of https://lloydstellar.nl/styles.css (LLOYDOS
   chrome around the tool). Everything inside .cutter is analogue:
   a dark wooden bench, a self-healing cutting mat, a kraft paper
   tray and strips of paper cut from books, typed pages and
   newspapers. Dymo-style embossed tape labels for the controls.

   Sections
   0. tokens and resets
   1. bench frame and toolbar
   2. paper tray (sources and the pile)
   3. cutting mat and lines
   4. strips (paper, fonts, edges, ghost text)
   5. drag and drop states
   6. dialogs (library, help) and toasts
   7. fullscreen, rotate overlay, drawer
   8. page copy below the tool
   9. responsive
   10. reduced motion
   ============================================================= */

/* -------------------------------------------------------------
   0. TOKENS AND RESETS
   ------------------------------------------------------------- */
:root {
    --bench-wood: #3a2415;
    --bench-trim: #1e110a;
    --mat-green: #2b4a3b;
    --mat-line: rgba(220, 235, 225, 0.16);
    --mat-line-strong: rgba(220, 235, 225, 0.30);
    --kraft: #b8946a;
    --kraft-dark: #8a6a46;
    --ink: #1c1a17;
    --ink-type: #262320;
    --pencil: rgba(240, 236, 220, 0.78);
    --tape: #141414;
    --tape-red: #a8231c;
    --tape-text: #f4f1ea;
    --font-type: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
    --font-courier: 'Courier Prime', 'Courier New', monospace;
    --font-label: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --strip-fs: 17px;
    --cutter-h: clamp(560px, 78vh, 940px);
}

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

:where(.cutter, .ct-dialog) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    border-radius: 0;
    line-height: normal;
}

.cutter button:focus-visible,
.ct-dialog button:focus-visible,
.cutter input:focus-visible,
.cutter select:focus-visible,
.ct-dialog input:focus-visible,
.ct-dialog textarea:focus-visible,
.ct-dialog select:focus-visible,
.cutter .strip:focus-visible {
    outline: 2px solid #ffd45a;
    outline-offset: 2px;
}

.ct-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -------------------------------------------------------------
   1. BENCH FRAME AND TOOLBAR
   ------------------------------------------------------------- */
.cutter {
    position: relative;
    height: var(--cutter-h);
    display: flex;
    flex-direction: column;
    margin: 0 0 1.6rem;
    border: 6px solid var(--bench-trim);
    border-radius: 8px;
    background: var(--bench-wood) url('../img/wood.webp') center / 1024px 1024px repeat;
    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.55),
        0 18px 40px rgba(0, 0, 0, 0.55);
    color: var(--tape-text);
    font-family: var(--font-type);
    overflow: hidden;
    isolation: isolate;
}

/* soft bench lighting from the top left */
.cutter::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255, 220, 170, 0.14), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
    z-index: 0;
}

.cutter__bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 10px 14px 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05);
}

.cutter__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    min-width: 0;
}

/* a typed sticker label, slightly askew */
.cutter__logo {
    display: inline-block;
    padding: 5px 12px 4px;
    background: #f4efe2 url('../img/paper-white.webp') repeat;
    color: var(--ink-type);
    font-family: var(--font-type);
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: rotate(-1.2deg);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.45);
    clip-path: polygon(0 1px, 10% 0, 30% 1px, 55% 0, 80% 1.5px, 100% 0, 100% calc(100% - 1px), 70% 100%, 45% calc(100% - 1.5px), 20% 100%, 0 calc(100% - 1px));
    white-space: nowrap;
}

.cutter__logo small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    opacity: 0.7;
    margin-top: -2px;
}

.cutter__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Dymo-style embossed tape label */
.tape {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 5px;
    background: linear-gradient(180deg, #2a2a2a 0%, var(--tape) 45%, #050505 100%);
    color: var(--tape-text);
    font-family: var(--font-label);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.28), 0 1px 1px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    transition: transform 0.12s ease, filter 0.12s ease;
    position: relative;
}

.tape:nth-child(odd) { transform: rotate(-0.8deg); }
.tape:nth-child(even) { transform: rotate(0.6deg); }
.tape:hover { filter: brightness(1.3); }
.tape:active { transform: translateY(1px) scale(0.98); }
.tape[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }
/* only the sound toggle shows its off state as a struck-through label */
#ct-sound[aria-pressed="false"] { opacity: 0.6; }
#ct-sound[aria-pressed="false"]::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px; top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.tape--red {
    background: linear-gradient(180deg, #d0352c 0%, var(--tape-red) 45%, #6e140f 100%);
}

.tape--pulse {
    animation: tape-pulse 1.6s ease-in-out infinite;
}

@keyframes tape-pulse {
    0%, 100% { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 0 rgba(255, 212, 90, 0); }
    50% { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 6px rgba(255, 212, 90, 0.35); }
}

.tape svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }

.tape-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 3px;
    background: linear-gradient(180deg, #2a2a2a 0%, var(--tape) 45%, #050505 100%);
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tape-text);
    transform: rotate(0.4deg);
}

.tape-select select {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: #ffd45a;
    background: transparent;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
}
.tape-select select option { color: #111; background: #f4efe2; text-transform: none; letter-spacing: 0; }

/* export menu */
.ct-menu { position: relative; }
.ct-menu__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 210px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #f1ebdb url('../img/paper-cream.webp') repeat;
    color: var(--ink-type);
    box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.5);
    transform: rotate(0.6deg);
    clip-path: polygon(0 1px, 20% 0, 50% 1px, 80% 0, 100% 1px, 100% calc(100% - 1px), 60% 100%, 30% calc(100% - 1px), 0 100%);
}
.ct-menu__list[hidden] { display: none; }
.ct-menu__list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 14px;
    font-family: var(--font-type);
    font-size: 14px;
}
.ct-menu__list button:hover,
.ct-menu__list button:focus-visible { background: rgba(0, 0, 0, 0.08); outline-offset: -2px; }
.ct-menu__list button small { display: block; font-size: 11px; opacity: 0.65; }
.ct-menu__list button[disabled] { opacity: 0.4; cursor: default; }
.ct-menu__list button[disabled]:hover { background: none; }
.ct-menu__list hr { border: 0; border-top: 1px dashed rgba(0, 0, 0, 0.25); margin: 4px 10px; }

/* -------------------------------------------------------------
   Body: tray + mat
   ------------------------------------------------------------- */
.cutter__body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: 12px 14px 10px;
    gap: 14px;
}

/* -------------------------------------------------------------
   2. PAPER TRAY
   ------------------------------------------------------------- */
.tray {
    position: relative;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--kraft) url('../img/paper-kraft.webp') repeat;
    border: 1px solid rgba(60, 40, 20, 0.6);
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 6px rgba(120, 90, 55, 0.55),
        inset 0 0 40px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.45);
    transform: rotate(-0.3deg);
}

.tray__head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 12px 8px;
    border-bottom: 1px dashed rgba(60, 40, 20, 0.45);
}

.tray__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-type);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3a2a18;
}

.tray__count {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #5a4330;
}

.tray__filter {
    width: 100%;
    padding: 6px 9px;
    font: 14px/1.2 var(--font-type);
    color: var(--ink-type);
    background: #f4efe2 url('../img/paper-white.webp') repeat;
    border: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
    transform: rotate(0.4deg);
}
.tray__filter::placeholder { color: #8a7a66; }

.tray__sources {
    /* never shrinks: with a full pile the flex algorithm would otherwise squeeze
       this row to its min-height and the chips would overflow under the strips */
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 10px;
    min-height: 26px;
    border-bottom: 1px dashed rgba(60, 40, 20, 0.45);
}
.tray__sources:empty { display: none; }

/* a source is a little book spine / file tab */
.src-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 6px 3px 8px;
    font-family: var(--font-type);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #f3ecdd;
    background: #4a2f1e;
    border-left: 4px solid #c9a24a;
    border-radius: 2px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);
    transform: rotate(-0.6deg);
}
.src-chip:nth-child(2) { background: #243a52; border-left-color: #9fb7c9; transform: rotate(0.5deg); }
.src-chip:nth-child(3) { background: #3d3d3d; border-left-color: #d9d2c2; transform: rotate(-0.3deg); }
.src-chip:nth-child(4) { background: #4a2a3a; border-left-color: #d9a3b8; transform: rotate(0.4deg); }
.src-chip:nth-child(5) { background: #2f4a3b; border-left-color: #a8d5b5; transform: rotate(-0.5deg); }
.src-chip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.src-chip__n { opacity: 0.7; }
.src-chip--uncut { outline: 2px dashed #ffd45a; outline-offset: 1px; }
.src-chip button {
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.75;
}
.src-chip button:hover { opacity: 1; color: #ffb4ae; }

.tray__pile {
    position: relative;
    flex: 1 1 auto;
    min-height: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px 24px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 40, 20, 0.6) transparent;
}

.tray__empty {
    margin: 18px 14px;
    padding: 12px 14px;
    font-family: var(--font-type);
    font-size: 13px;
    line-height: 1.5;
    color: #3a2a18;
    border: 1px dashed rgba(60, 40, 20, 0.5);
}
.tray__empty[hidden] { display: none; }
.tray__empty b { font-weight: normal; text-decoration: underline; }

.tray.is-over {
    box-shadow:
        inset 0 0 0 6px rgba(255, 212, 90, 0.55),
        inset 0 0 40px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------
   3. CUTTING MAT AND LINES
   ------------------------------------------------------------- */
.mat {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: var(--mat-green);
    background-image:
        radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.28) 100%),
        url('../img/mat.webp'),
        repeating-linear-gradient(90deg, var(--mat-line-strong) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(0deg, var(--mat-line-strong) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(90deg, var(--mat-line) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, var(--mat-line) 0 1px, transparent 1px 24px);
    background-size: 100% 100%, 512px 512px, auto, auto, auto, auto;
    background-position: 0 0, 0 0, 12px 12px, 12px 12px, 12px 12px, 12px 12px;
    /* styles.css puts no-repeat on every section (glass panel corners); the mat is a section */
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 0 60px rgba(0, 0, 0, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none !important;
    opacity: 1 !important;
}

/* ruler along the top edge */
.mat::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 12px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px 60px);
    background-size: 12px 6px, 60px 12px;
    background-repeat: repeat-x;
    background-position: 12px 6px, 12px 0;
    opacity: 0.6;
    pointer-events: none;
}

.mat__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px 22px 30px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.mat__lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 46px;
    padding: 4px 36px 4px 32px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
}

.line__num {
    position: absolute;
    left: 2px;
    top: 10px;
    width: 22px;
    font-family: var(--font-type);
    font-size: 11px;
    color: var(--pencil);
    opacity: 0.8;
    text-align: right;
    pointer-events: none;
}

.line__strips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 8px;
    min-height: 38px;
    flex: 1 1 auto;
    min-width: 0;
}

.line__clear {
    position: absolute;
    right: 4px;
    top: 10px;
    width: 24px;
    height: 24px;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--pencil);
    opacity: 0;
    transition: opacity 0.15s;
    border-radius: 50%;
}
.line:hover .line__clear,
.line:focus-within .line__clear { opacity: 0.75; }
.line__clear:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

.line--empty .line__strips::before {
    content: 'verse break';
    font-family: var(--font-type);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--pencil);
    opacity: 0.5;
    padding: 10px 4px;
}

.line.is-over { background: rgba(255, 255, 255, 0.05); }

.mat__newline {
    margin: 10px 36px 0 32px;
    padding: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    color: var(--pencil);
    font-family: var(--font-type);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-align: center;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s;
}
.mat__newline.is-over { opacity: 1; background: rgba(255, 255, 255, 0.1); }

.mat__tools {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.pencil-btn {
    font-family: var(--font-type);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--pencil);
    padding: 4px 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
    opacity: 0.8;
}
.pencil-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }

.mat__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    pointer-events: none;
    font-family: var(--font-type);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pencil);
    opacity: 0.75;
}
.mat__hint[hidden] { display: none; }
.mat--empty .mat__newline,
.mat--empty .mat__tools { display: none; }
.mat.is-over { box-shadow: inset 0 0 0 3px rgba(255, 212, 90, 0.55), inset 0 0 60px rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.5); }
.mat__hint span { max-width: 420px; }

/* -------------------------------------------------------------
   4. STRIPS
   ------------------------------------------------------------- */
.strip {
    --rot: 0deg;
    --padt: 4px;
    --padb: 4px;
    --padx: 11px;
    --peek-t: 3px;
    --peek-b: 3px;
    --gx-t: -20px;
    --gx-b: -30px;
    --shift: 0px;
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-left: var(--shift);
    transform: rotate(var(--rot));
    transform-origin: 50% 50%;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* none: the browser never scrolls on a finger that starts on a strip;
       app.js decides between drag (sideways or hold) and manual scroll */
    touch-action: none;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.28);
    will-change: transform;
}
.strip:active { cursor: grabbing; }

.strip__paper {
    position: relative;
    display: block;
    padding: var(--padt) var(--padx) var(--padb);
    overflow: hidden;
    color: var(--ink);
    font-size: var(--strip-fs);
    line-height: 1.15;
    white-space: nowrap;
    background-color: #f1ead7;
    background-repeat: repeat;
}

.strip__text {
    position: relative;
    display: block;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* cut-off neighbouring lines of the book peeking at the edges */
.strip__ghost {
    position: absolute;
    left: var(--gx-t);
    top: calc(var(--peek-t) - 1em);
    white-space: nowrap;
    line-height: 1;
    opacity: 0.62;
    pointer-events: none;
}
.strip__ghost--b {
    left: var(--gx-b);
    top: auto;
    bottom: calc(var(--peek-b) - 1em);
}

/* papers */
.paper--white { background-color: #f6f3ea; background-image: url('../img/paper-white.webp'); }
.paper--cream { background-color: #eee4cc; background-image: url('../img/paper-cream.webp'); }
.paper--old   { background-color: #e2cea0; background-image: url('../img/paper-old.webp'); }
.paper--news  { background-color: #dad6c8; background-image: url('../img/paper-news.webp'); }

/* type */
.font--elite      { font-family: 'Special Elite', var(--font-courier); font-size: calc(var(--strip-fs) - 2px); color: var(--ink-type); letter-spacing: 0.02em; text-shadow: 0 0 0.6px rgba(0, 0, 0, 0.45); }
.font--courier    { font-family: 'Courier Prime', 'Courier New', monospace; font-size: calc(var(--strip-fs) - 1px); color: #1e2a44; }
.font--garamond   { font-family: 'EB Garamond', Georgia, serif; font-size: calc(var(--strip-fs) + 1px); }
.font--baskerville{ font-family: 'Libre Baskerville', Georgia, serif; font-size: calc(var(--strip-fs) - 1px); }
.font--oldstandard{ font-family: 'Old Standard TT', 'Times New Roman', serif; }
.font--fell       { font-family: 'IM Fell English', Georgia, serif; font-size: calc(var(--strip-fs) + 1px); color: #2a1f16; }
.font--fell .strip__ghost,
.font--garamond .strip__ghost { font-style: italic; }

/* hover lift */
@media (hover: hover) {
    .strip:hover { box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.38); z-index: 2; }
}

/* fresh from the scissors */
.strip--new { animation: strip-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes strip-in {
    from { opacity: 0; transform: rotate(var(--rot)) translateY(-14px) scale(0.92); }
    to   { opacity: 1; transform: rotate(var(--rot)) translateY(0) scale(1); }
}

.strip--shuffle { animation: strip-shuffle 0.5s ease both; }
@keyframes strip-shuffle {
    0%   { transform: rotate(calc(var(--rot) * 3)) translateX(24px); opacity: 0.2; }
    100% { transform: rotate(var(--rot)) translateX(0); opacity: 1; }
}

.strip.is-hidden { display: none; }

/* -------------------------------------------------------------
   5. DRAG AND DROP STATES
   ------------------------------------------------------------- */
.strip--lifted { opacity: 0.32; }

.strip--ghost {
    position: fixed;
    z-index: 10060;
    margin: 0;
    pointer-events: none;
    transform: rotate(var(--rot)) scale(1.06);
    box-shadow: none;
    filter: drop-shadow(7px 14px 10px rgba(0, 0, 0, 0.5));
    transition: none;
}

.strip--placeholder {
    display: inline-block;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    box-shadow: none;
}

body.ct-dragging,
body.ct-dragging * { cursor: grabbing !important; }

/* -------------------------------------------------------------
   6. DIALOGS AND TOASTS
   ------------------------------------------------------------- */
.ct-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-type);
    font-family: var(--font-type);
    overflow: visible;
}
.ct-dialog::backdrop { background: rgba(5, 3, 2, 0.72); }

.ct-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min(480px, 80vh);
    max-height: min(86vh, 760px);
    background: #efe7d2 url('../img/paper-cream.webp') repeat;
    box-shadow: 4px 10px 30px rgba(0, 0, 0, 0.6);
    transform: rotate(-0.4deg);
    clip-path: polygon(0 2px, 15% 0, 40% 2px, 65% 0, 90% 2px, 100% 0, 100% calc(100% - 2px), 75% 100%, 50% calc(100% - 2px), 25% 100%, 0 calc(100% - 2px));
}

.ct-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 4px;
}
.ct-card__head h2 {
    margin: 0;
    font: 18px/1.2 var(--font-type);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-type);
    text-shadow: none;
    display: block;
    background: none;
}
.ct-card__head h2::before,
.ct-card__head h2::after { display: none; content: none; }
.ct-card__counter {
    margin-left: auto;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #6a5540;
}
.ct-card__close {
    width: 30px; height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}
.ct-card__close:hover { background: rgba(0, 0, 0, 0.08); }

.ct-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.ct-tab {
    padding: 9px 16px 8px;
    font: 13px/1 var(--font-type);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    transform: translateY(1px);
}
.ct-tab[aria-selected="true"] { background: #f8f3e6; font-weight: bold; }

.ct-panel { padding: 18px 22px 22px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.ct-panel[hidden] { display: none; }

.ct-panel p { font: 14px/1.5 var(--font-type); color: #3a2f24; margin: 0 0 14px; }
.ct-panel a { color: #7a2e22; }

.ct-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ct-row label { font: 12px/1 var(--font-type); letter-spacing: 0.06em; text-transform: uppercase; color: #5a4330; }

.ct-input,
.ct-select,
.ct-textarea {
    font: 15px/1.35 var(--font-type);
    color: var(--ink-type);
    background: #fbf8f0 url('../img/paper-white.webp') repeat;
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 7px 10px;
    min-width: 0;
}
.ct-input { flex: 1 1 200px; }
.ct-select { flex: 1 1 180px; }
.ct-textarea { width: 100%; min-height: 150px; resize: vertical; }

/* ink stamp button */
.stamp {
    padding: 7px 14px 6px;
    font: 13px/1 var(--font-type);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a1f17;
    border: 2px solid #8a1f17;
    border-radius: 3px;
    background: transparent;
    transform: rotate(-1deg);
    opacity: 0.9;
}
.stamp:hover { background: rgba(138, 31, 23, 0.08); opacity: 1; }
.stamp[disabled] { opacity: 0.35; cursor: not-allowed; }
.stamp--dark { color: #222; border-color: #222; }

.ct-results {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border-top: 1px dashed rgba(0, 0, 0, 0.25);
}
.ct-results li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
    font: 14px/1.3 var(--font-type);
}
.ct-results .t { flex: 1 1 auto; min-width: 0; }
.ct-results .t b { font-weight: normal; font-family: 'EB Garamond', Georgia, serif; font-size: 16px; color: var(--ink-type); text-shadow: none; }
/* styles.css gives every <b> and <strong> the cyan phosphor glow; on paper that reads as white haze */
.ct-dialog b, .ct-dialog strong, .cutter b, .cutter strong { color: inherit; text-shadow: none; }
.ct-results .t small { display: block; font-size: 11px; color: #6a5540; }
.ct-results .m { font-size: 11px; color: #6a5540; white-space: nowrap; }
.ct-results .ct-add { padding: 4px 9px; font-size: 11px; }
.ct-note { font-size: 12px; color: #6a5540; }

.ct-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 190px;
    margin-top: 4px;
    border: 2px dashed rgba(0, 0, 0, 0.35);
    padding: 26px 16px;
    text-align: center;
    font: 16px/1.5 var(--font-type);
    color: #3a2f24;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}
.ct-drop svg { width: 40px; height: 40px; fill: none; stroke: #6a5540; stroke-width: 1.5; }
.ct-drop small { font-size: 12px; color: #6a5540; }
.ct-drop:hover { background: rgba(255, 255, 255, 0.45); }
.ct-drop.is-over { background: rgba(255, 212, 90, 0.3); }
.ct-drop input { display: none; }

.ct-status {
    position: relative;
    z-index: 2;
    padding: 5px 16px 7px;
    font: 12px/1.3 var(--font-type);
    letter-spacing: 0.04em;
    color: rgba(244, 236, 220, 0.8);
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    min-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-toast {
    position: absolute;
    left: 50%;
    bottom: 44px;
    z-index: 40;
    transform: translateX(-50%) rotate(-0.8deg);
    padding: 8px 16px;
    background: #f4efe2 url('../img/paper-white.webp') repeat;
    color: var(--ink-type);
    font: 14px/1.3 var(--font-type);
    box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
}
.ct-toast.is-on { opacity: 1; transform: translateX(-50%) rotate(-0.8deg) translateY(-6px); }

/* confirmation card */
.ct-confirm { width: min(420px, calc(100vw - 32px)); }
.ct-confirm .ct-card { min-height: 0; }
.ct-confirm .ct-panel { padding: 20px 22px 18px; }
.ct-confirm__title {
    margin: 0 0 8px;
    font: 15px/1.2 var(--font-type);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a1f17;
    display: block;
    background: none;
    text-shadow: none;
}
.ct-confirm__title::before, .ct-confirm__title::after { display: none; content: none; }
.ct-confirm .ct-panel p { font-size: 16px; margin-bottom: 16px; }
.ct-confirm__row { justify-content: flex-end; margin-bottom: 0; }

/* first-visit nudge: a card floating over the bench, not over the page */
.ct-nudge {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 7, 3, 0.38);
    color: var(--ink-type);
    font-family: var(--font-type);
}
.ct-nudge[hidden] { display: none; }
.ct-nudge__card { width: min(520px, 100%); min-height: 0; transform: rotate(-0.6deg); }
.ct-nudge__opt { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ct-nudge__opt .stamp { flex: 0 0 172px; text-align: center; white-space: nowrap; }
.ct-nudge__opt span { font: 13px/1.45 var(--font-type); color: #3a2f24; }
.ct-nudge kbd { font: 11px/1 var(--font-courier); padding: 1px 4px; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 3px; background: #fff; }
.ct-nudge .ct-panel { padding: 20px 22px 18px; overflow: visible; }
.ct-nudge .ct-panel p { font-size: 15px; line-height: 1.5; color: #3a2f24; margin: 0 0 14px; }
.ct-nudge__row { justify-content: space-between; align-items: center; margin: 4px 0 0; }
.ct-nudge__skip { font: 13px/1 var(--font-type); color: #6a5540; text-decoration: underline; padding: 6px 4px; margin-left: auto; }
.ct-nudge__skip:hover { color: #8a1f17; }
.ct-check, .ct-row .ct-check { display: flex; align-items: center; gap: 8px; font: 13px/1 var(--font-type); letter-spacing: 0; text-transform: none; color: #6a5540; cursor: pointer; }
.ct-check input { width: 15px; height: 15px; accent-color: #8a1f17; margin: 0; }

/* help dialog */
.ct-help dl { margin: 0; font: 14px/1.5 var(--font-type); }
.ct-help dt { font-weight: bold; margin-top: 8px; }
.ct-help dd { margin: 0 0 0 0; color: #3a2f24; }
.ct-help kbd {
    font: 12px/1 var(--font-courier);
    padding: 2px 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Keyboard on a phone: app.js pins the dialog to the visible band above the
   keyboard (.ct-fit, inline geometry from visualViewport) and, while a field
   has focus, strips the card down to that field and its results (.ct-kb). */
.ct-dialog.ct-fit { transform: none; }
.ct-dialog.ct-fit .ct-card { height: 100%; max-height: 100%; min-height: 0; transform: none; clip-path: none; }
.ct-dialog.ct-kb .ct-card__head { padding: 6px 12px 0; }
.ct-dialog.ct-kb .ct-card__head h2 { font-size: 13px; }
.ct-dialog.ct-kb .ct-card__counter,
.ct-dialog.ct-kb .ct-tabs,
.ct-dialog.ct-kb .ct-panel > p:first-child,
.ct-dialog.ct-kb .ct-row--browse,
.ct-dialog.ct-kb .ct-drop { display: none; }
.ct-dialog.ct-kb .ct-panel { padding: 6px 12px 8px; }
.ct-dialog.ct-kb .ct-row { margin-bottom: 6px; gap: 6px; }
.ct-dialog.ct-kb .ct-input, .ct-dialog.ct-kb .ct-textarea { font-size: 16px; }
.ct-dialog.ct-kb .ct-textarea { min-height: 60px; }
.ct-dialog.ct-kb .ct-results { max-height: none; }
.ct-dialog.ct-kb .ct-results li { padding: 6px 4px; }

/* short viewports (phone in landscape): compact card */
@media (max-height: 520px) {
    .ct-dialog, .ct-card { max-height: calc(100vh - 16px); }
    .ct-card { min-height: 0; }
    .ct-card__head { padding: 10px 16px 0; }
    .ct-card__head h2 { font-size: 15px; }
    .ct-tabs { padding: 8px 16px 0; }
    .ct-tab { padding: 6px 12px 5px; font-size: 12px; }
    .ct-panel { padding: 10px 16px 12px; }
    .ct-panel p { margin-bottom: 8px; font-size: 13px; }
    .ct-drop { min-height: 96px; padding: 10px; gap: 2px; font-size: 14px; }
    .ct-drop svg { width: 22px; height: 22px; }
    .ct-textarea { min-height: 90px; }
    .ct-results { max-height: 150px; }
}

/* -------------------------------------------------------------
   7. FULLSCREEN, ROTATE OVERLAY, DRAWER
   ------------------------------------------------------------- */
.cutter:fullscreen,
.cutter:-webkit-full-screen {
    height: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-width: 0;
}

.cutter--fs {
    position: fixed !important;
    inset: 0;
    z-index: 10005;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    margin: 0;
    border-radius: 0;
    border-width: 0;
}

html.game-fs-active body { overflow: hidden; }

/* a big screen gets bigger paper: everything on the bench scales with the viewport */
@media (min-width: 1500px) {
    .cutter:fullscreen,
    .cutter:-webkit-full-screen,
    .cutter--fs {
        --strip-fs: clamp(17px, 1.2vw, 26px);
    }
    .cutter:fullscreen .tray,
    .cutter:-webkit-full-screen .tray,
    .cutter--fs .tray { flex-basis: clamp(300px, 19vw, 420px); }
    .cutter:fullscreen .cutter__body,
    .cutter:-webkit-full-screen .cutter__body,
    .cutter--fs .cutter__body { padding: 16px 22px 14px; gap: 22px; }
    .cutter:fullscreen .mat__scroll,
    .cutter:-webkit-full-screen .mat__scroll,
    .cutter--fs .mat__scroll { padding: 34px 32px 40px 26px; }
    .cutter:fullscreen .mat__lines,
    .cutter:-webkit-full-screen .mat__lines,
    .cutter--fs .mat__lines { gap: 16px; }
    .cutter:fullscreen .line,
    .cutter:-webkit-full-screen .line,
    .cutter--fs .line { padding: 6px 40px 8px 40px; gap: 12px; }
    .cutter:fullscreen .line__strips,
    .cutter:-webkit-full-screen .line__strips,
    .cutter--fs .line__strips { gap: 10px 14px; }
    .cutter:fullscreen .line__num,
    .cutter:-webkit-full-screen .line__num,
    .cutter--fs .line__num { font-size: 13px; }
    .cutter:fullscreen .tray__pile,
    .cutter:-webkit-full-screen .tray__pile,
    .cutter--fs .tray__pile { gap: 10px; padding: 14px 18px 30px 14px; }
    .cutter:fullscreen .tray__filter,
    .cutter:-webkit-full-screen .tray__filter,
    .cutter--fs .tray__filter { font-size: 16px; }
    .cutter:fullscreen .mat__newline,
    .cutter:-webkit-full-screen .mat__newline,
    .cutter--fs .mat__newline { font-size: 14px; padding: 16px; }
    .cutter:fullscreen .pencil-btn,
    .cutter:-webkit-full-screen .pencil-btn,
    .cutter--fs .pencil-btn { font-size: 14px; }
}

.cutter__rotate {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 30px;
    text-align: center;
    background: rgba(20, 12, 6, 0.92);
    color: #f4efe2;
    font: 16px/1.5 var(--font-type);
}
.cutter__rotate.is-on { display: flex; }
.cutter__rotate svg { width: 64px; height: 64px; fill: none; stroke: #ffd45a; stroke-width: 2; animation: rotate-hint 2.4s ease-in-out infinite; }
@keyframes rotate-hint {
    0%, 20% { transform: rotate(0); }
    50%, 70% { transform: rotate(-90deg); }
    100% { transform: rotate(0); }
}
.cutter__rotate .ct-link { font-size: 13px; color: #cdbf9f; text-decoration: underline; }

.cutter__tray-toggle { display: none; }

/* Fill window: desktop only; phones have the real fullscreen */
@media (pointer: coarse), (max-width: 900px) {
    .cutter__fill { display: none; }
}

/* -------------------------------------------------------------
   8. PAGE COPY BELOW THE TOOL
   ------------------------------------------------------------- */
.ct-lede { color: var(--crt-cyan-mid); }
.ct-lede strong { color: var(--crt-cyan-bright); }

.ct-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ct-steps li { position: relative; padding: 12px 14px 12px 50px; border: 1px solid var(--panel-border-dim); background: rgba(4, 16, 42, 0.35); }
.ct-steps li::before { counter-increment: step; content: '0' counter(step); position: absolute; left: 12px; top: 10px; font-family: var(--font-display); font-size: 18px; color: var(--crt-amber); }
.ct-steps strong { color: var(--crt-cyan-bright); display: block; margin-bottom: 4px; }

.ct-example { font-family: var(--font-mono); line-height: 1.7; }
.ct-example span { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border: 1px dashed var(--crt-cyan-dim); color: var(--crt-cyan-bright); }

.ct-faq details { border-bottom: 1px solid var(--panel-border-dim); padding: 0.4rem 0; }
.ct-faq summary { cursor: pointer; color: var(--crt-cyan-bright); font-weight: 600; }
.ct-faq summary:hover { color: var(--crt-amber); }
.ct-faq details p { margin: 0.6rem 0 0.4rem 1rem; }

/* -------------------------------------------------------------
   9. RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
    .tray { flex-basis: 260px; }
}

@media (max-width: 820px) {
    .cutter { --cutter-h: clamp(520px, 86vh, 900px); }
    .cutter__bar { padding: 8px 10px 6px; gap: 6px 8px; }
    .cutter__logo { font-size: 13px; padding: 4px 9px 3px; }
    .cutter__logo small { display: none; }
    .tape { padding: 6px 8px 5px; font-size: 10px; letter-spacing: 0.1em; }
    .tape .t-long { display: none; }
    .tape-select { font-size: 10px; }
    .cutter__body { padding: 8px; gap: 8px; }
    .tray { flex-basis: 42%; transform: none; }
    .tray__head { padding: 8px 10px 6px; }
    .mat__scroll { padding: 20px 10px 24px 8px; }
    .line { padding: 4px 30px 4px 26px; }
    :root { --strip-fs: 15px; }
}

/* phone in landscape: every pixel of height counts */
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
    .cutter__brand { display: none; }
    .tape .t-long, .tape svg { display: none; }
    .cutter__bar { padding: 5px 8px 4px; gap: 4px 5px; }
    .tape { padding: 5px 7px 4px; font-size: 9.5px; letter-spacing: 0.08em; }
    .tape-select { font-size: 9.5px; padding: 3px 6px 2px; }
    .cutter__body { padding: 6px 8px; gap: 8px; }
    .tray { flex-basis: 36%; }
    .tray__head { padding: 6px 8px 4px; gap: 4px; }
    .tray__filter { padding: 4px 8px; font-size: 13px; }
    .tray__sources { padding: 4px 8px 2px; }
    .ct-status { padding: 3px 10px 4px; min-height: 20px; font-size: 11px; }
    :root { --strip-fs: 14px; }
}

/* portrait phone or narrow: tray becomes a bottom drawer */
@media (max-width: 820px) and (orientation: portrait), (max-width: 560px) {
    .cutter__body { flex-direction: column-reverse; }
    .tray { flex: 0 0 40%; min-height: 0; transition: flex-basis 0.25s ease; }
    .cutter--tray-collapsed .tray { flex-basis: 48px; overflow: hidden; }
    .cutter--tray-collapsed .tray__pile,
    .cutter--tray-collapsed .tray__sources,
    .cutter--tray-collapsed .tray__filter { display: none; }
    .cutter__tray-toggle { display: inline-flex; }
    .mat { flex: 1 1 auto; }
}

/* -------------------------------------------------------------
   10. REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .strip--new, .strip--shuffle, .tape--pulse, .cutter__rotate svg { animation: none !important; }
    .tape, .ct-toast, .tray { transition: none; }
}