/* =====================================================================
   "Papier knipwerk" — the paper cut-out style the family's other sites
   carry (ContractorDashboard, CourierDashboard): construction paper cut
   out and laid on a sunburst. Off-white paper, navy ink, a coral dot,
   mustard for whatever is open, Luckiest Guy for titles and Nunito for
   everything else.

   Active while <html data-theme="papercut"> (js/Theme.js, chosen per
   account on the Account tab, users.theme from 020). With any other value
   — 'original', the default — this file does nothing at all, and App.css
   with the other sheets IS the original style. Do not move a rule of the
   original look in here, and do not put a papercut rule anywhere else.

   Every rule sits inside @scope, whose root adds no specificity, and this
   sheet is linked LAST: each rule replaces exactly the rule with the same
   selector in the sheet it overrides, on order alone. A heavier selector
   would start beating rules it was never meant to touch.

   Most of the look rides on App.css's own variables. Two places keep the
   ORIGINAL type on purpose: the Grafische stamboom and the waaier. Both
   lay their names out from a width per character (FanView's CHAR_W, the
   chart's box widths) measured for the condensed face, and Nunito is a
   good deal wider — names would run out of their wedges and boxes.

   What carries meaning keeps its colour: the herkomstbalk and waaier
   palette (js/Palette.js), the landscape's rows, the map's circles.

   Tilts use the `rotate` property rather than `transform`, so they
   compose with the transforms the original sheets already use (the
   person card slides in on transform).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Nunito:ital,wght@0,400..900;1,400..900&display=swap');

html[data-theme="papercut"] {
    --pc-ink: #1b2a41;
    --pc-paper: #fbf7ee;
    --pc-paper-2: #f4ecdb;
    --pc-paper-3: #ebdfc6;
    --pc-field: #fffdf8;
    --pc-blue: #2f74d0;
    --pc-blue-ink: #1f56a8;
    --pc-coral: #e8535d;
    --pc-mustard: #f6c343;
    --pc-mustard-pale: #fbe8a6;
    --pc-tape: rgba(255, 246, 214, 0.62);
    --pc-display: "Luckiest Guy", "Nunito", sans-serif;

    /* App.css's palette, re-cut in paper. --paper is the sheet everything
       is written on now, not the page: the page is the sunburst. */
    --paper: var(--pc-paper);
    --card: var(--pc-field);
    --ink: var(--pc-ink);
    --woad: var(--pc-blue-ink);
    --madder: #c23b45;
    --thread: #c9b78f;
    --muted: #5d6577;
    --line: #d9ccb0;
    --serif: "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --cond: "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Paper lying on paper: a thin hard edge plus a soft drop underneath */
    --pc-shadow: 1px 2px 0 rgba(27, 42, 65, 0.1), 3px 6px 14px rgba(15, 30, 70, 0.3);
    --pc-shadow-hard: 2px 3px 0 rgba(0, 0, 0, 0.22);
}

@scope (html[data-theme="papercut"]) {

    /* -----------------------------------------------------------------
       Base: the sunburst every title card in the videos sits on
       ----------------------------------------------------------------- */

    body {
        font-weight: 500;
        background-color: var(--pc-blue);
        background-image:
            radial-gradient(ellipse at 50% 35%, transparent 35%, rgba(12, 30, 75, 0.35)),
            repeating-conic-gradient(from -4deg at 50% 38%, #3479d6 0deg 9deg, #2c6bcb 9deg 18deg);
        background-attachment: fixed;
    }

    ::selection { background: var(--pc-mustard); color: var(--pc-ink); }

    /* The two drawings that measure their own type keep the original faces;
       see the header of this file. */
    .chart-svg, .fansvg, .fan svg {
        --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
        --cond: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
    }

    /* -----------------------------------------------------------------
       The page header: a sheet taped to the sunburst
       ----------------------------------------------------------------- */

    .wrap { padding-top: 34px; }

    header {
        position: relative;
        margin-top: 10px;
        padding: 34px 28px 22px;
        background: var(--pc-paper);
        border-bottom: 0;
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
        rotate: -0.4deg;
    }
    header::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 50%;
        width: 120px;
        height: 28px;
        margin-left: -60px;
        background: var(--pc-tape);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        rotate: -3deg;
    }

    .eyebrow {
        display: inline-block;
        font-weight: 900;
        letter-spacing: .14em;
        color: #fff;
        background: var(--pc-coral);
        padding: 4px 10px 3px;
        border-radius: 3px;
        box-shadow: var(--pc-shadow-hard);
        rotate: -2deg;
    }

    h1 {
        font-family: var(--pc-display);
        font-weight: 400;
        font-synthesis: none;
        letter-spacing: .02em;
        line-height: 1.1;
    }
    h1 em { font-style: normal; color: var(--pc-coral); }

    .facts { border-top: 2px dashed var(--line); }
    .fact { border-right: 2px dashed var(--line); }
    .fact b { font-family: var(--pc-display); font-weight: 400; font-size: 22px; color: var(--pc-ink); }
    .fact span { font-weight: 800; }

    /* -----------------------------------------------------------------
       Controls: navy card stock, leaning over a little when pointed at
       ----------------------------------------------------------------- */

    .bar {
        margin-top: 16px;
        padding: 10px 12px;
        background: var(--pc-paper);
        border-bottom: 0;
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
    }

    .search input {
        background: var(--pc-field);
        border: 2px solid var(--line);
        border-radius: 4px;
        font-weight: 600;
    }
    .search input:focus { outline: 0; border-color: var(--pc-ink); box-shadow: 0 0 0 3px rgba(246, 195, 67, .6); }

    button.ctl,
    button.branch,
    .chartctl button,
    .maplegend .legbtn,
    .landctl,
    .fanctl {
        font-weight: 800;
        color: var(--pc-ink);
        background: var(--pc-paper);
        border: 2px solid var(--pc-ink);
        border-radius: 3px;
        box-shadow: 2px 2px 0 rgba(27, 42, 65, .35);
        transition: rotate .12s ease, background-color .12s ease;
    }
    button.ctl:hover,
    button.branch:hover,
    .chartctl button:hover,
    .maplegend .legbtn:hover,
    .landctl:hover,
    .fanctl:hover { background: var(--pc-mustard-pale); border-color: var(--pc-ink); rotate: -1.5deg; }

    button.branch[aria-pressed="true"] {
        background: var(--pc-mustard);
        color: var(--pc-ink);
        border-color: var(--pc-ink);
        rotate: -1deg;
    }
    button.branch:disabled { background: var(--pc-paper-2); box-shadow: none; rotate: none; }

    /* Alles uitklappen / Basis, and the chart's Alles / Basis: the lit one is
       the state on screen, in the same mustard as the chosen stamboom. */
    .openpair { gap: 6px; }
    .openpair button.ctl:first-child,
    .openpair button.ctl:last-child { border-radius: 3px; margin-left: 0; }
    .openpair button.ctl[aria-pressed="true"],
    .chartctl button[aria-pressed="true"] {
        background: var(--pc-mustard);
        color: var(--pc-ink);
        border-color: var(--pc-ink);
        rotate: -1deg;
    }
    button.branch:disabled:hover { border-color: var(--pc-ink); }

    button.primary {
        font-weight: 900;
        letter-spacing: .08em;
        color: #fff;
        background: var(--pc-ink);
        border: 0;
        border-radius: 4px;
        box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 5px 10px rgba(0, 0, 0, .15);
        transition: rotate .12s ease, box-shadow .12s ease;
    }
    button.primary:hover { background: var(--pc-ink); rotate: -1.5deg; box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 8px 14px rgba(0, 0, 0, .2); }

    /* -----------------------------------------------------------------
       The bars above the views: strips of paper
       ----------------------------------------------------------------- */

    .branchbar, .ancresult {
        background: var(--pc-paper);
        border: 0;
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
    }
    .bookmarkbar { margin-top: 10px; }
    .branchlabel {
        font-family: var(--pc-display);
        font-weight: 400;
        font-size: 13px;
        letter-spacing: .06em;
        color: var(--pc-ink);
    }
    .branchnow { font-weight: 700; }

    .bmwrap { border: 2px solid var(--pc-ink); border-radius: 3px; box-shadow: 2px 2px 0 rgba(27, 42, 65, .35); }
    .bmwrap:hover { border-color: var(--pc-ink); rotate: -1deg; }
    button.bmchip { font-weight: 700; color: var(--pc-ink); }
    button.bmdrop { border-left: 2px solid var(--pc-ink); }
    button.bmdrop:hover { background: var(--pc-coral); color: #fff; }

    .ancname { font-family: var(--pc-display); font-weight: 400; color: var(--pc-ink); }

    /* -----------------------------------------------------------------
       The view tabs: paper tabs, the open one a mustard tile cut by hand
       ----------------------------------------------------------------- */

    .viewtabs { flex-wrap: wrap; gap: 8px 6px; margin-top: 22px; border-bottom: 0; }

    .viewtabs button {
        position: relative;
        z-index: 0;
        margin-bottom: 0;
        font-weight: 800;
        color: var(--pc-ink);
        background: var(--pc-paper);
        border: 0;
        border-radius: 3px;
        box-shadow: var(--pc-shadow-hard);
        transition: rotate .12s ease;
    }
    .viewtabs button:hover { color: var(--pc-ink); background: var(--pc-mustard-pale); rotate: -1deg; }

    /* The tile is ::before so clip-path can cut it without cutting the
       text; the drop shadow is a filter, since a box-shadow would be clipped
       away along with the corners. The tabs take turns through five shapes
       and tilts, so the tile changes form as you move along. */
    .viewtabs button[aria-selected="true"] {
        color: var(--pc-ink);
        background: none;
        box-shadow: none;
        filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .3));
        rotate: var(--pc-tilt, -1.5deg);
    }
    .viewtabs button[aria-selected="true"]::before {
        content: "";
        position: absolute;
        inset: -2px -3px;
        z-index: -1;
        background: var(--pc-mustard);
        clip-path: var(--pc-shape, polygon(0 0, 100% 0, 100% 100%, 0 100%));
        animation: pc-tile-slap .18s ease-out;
    }
    .viewtabs button:nth-child(5n+1) { --pc-tilt: -1.5deg; --pc-shape: polygon(0 26%, 6% 0, 100% 5%, 98% 100%, 1% 94%); }
    .viewtabs button:nth-child(5n+2) { --pc-tilt: 1.2deg;  --pc-shape: polygon(2% 4%, 100% 0, 100% 66%, 93% 100%, 0 96%); }
    .viewtabs button:nth-child(5n+3) { --pc-tilt: -0.8deg; --pc-shape: polygon(0 0, 92% 4%, 100% 34%, 99% 100%, 3% 95%); }
    .viewtabs button:nth-child(5n+4) { --pc-tilt: 1.8deg;  --pc-shape: polygon(1% 7%, 98% 0, 100% 96%, 8% 100%, 0 68%); }
    .viewtabs button:nth-child(5n+5) { --pc-tilt: -2deg;   --pc-shape: polygon(3% 0, 100% 9%, 97% 90%, 52% 100%, 0 95%); }

    /* -----------------------------------------------------------------
       The views: each a sheet of paper. The original lets them sit on the
       page; on a sunburst nothing written straight onto it can be read.
       ----------------------------------------------------------------- */

    .tree, .docs, .fan, .land, .mapfilter:not([hidden]) {
        margin-top: 14px;
        padding: 14px 18px 18px;
        background: var(--pc-paper);
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
    }
    .tree[hidden], .docs[hidden], .fan[hidden], .land[hidden] { display: none; }

    .chart { border: 0; border-radius: 4px; box-shadow: var(--pc-shadow); }
    .chart .hint { font-weight: 700; border: 2px solid var(--line); }
    .landstage { background: linear-gradient(to bottom, #f1ead9 0, var(--pc-field) 38%); border: 2px solid var(--line); }

    .docs h3, .res h3, .acct h3, .fan h3, .land h3 {
        font-family: var(--pc-display);
        font-weight: 400;
        letter-spacing: .03em;
        color: var(--pc-ink);
    }
    .acct h4 { font-family: var(--pc-display); font-weight: 400; font-size: 15px; letter-spacing: .05em; color: var(--pc-ink); }

    /* The outline: the thread is a dashed cut line */
    ul.nest>li::before { height: 2px; }
    .row:hover { background: var(--pc-mustard-pale); }
    .row.sel { background: var(--pc-mustard); }
    .row.open>.nm { font-weight: 800; }
    .yrs { font-weight: 700; }
    .pl { font-weight: 700; }
    li.branchroot>.row { background: #fbd9cf; box-shadow: inset 3px 0 0 var(--pc-coral); }
    mark { background: var(--pc-mustard); color: var(--pc-ink); }
    .grp b { color: var(--pc-coral); }

    /* Tables: a dashed cut line under the headings */
    table.placetable th, .restable th { font-weight: 900; color: var(--pc-ink); border-bottom: 2px dashed var(--line); }
    table.placetable tbody tr:hover, .restable tr:hover td { background: var(--pc-mustard-pale); }

    footer {
        margin-top: 26px;
        padding: 16px 20px;
        background: var(--pc-paper);
        border-top: 0;
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
        rotate: .3deg;
    }

    /* -----------------------------------------------------------------
       The person card: a sheet with an ink edge and a strip of tape
       ----------------------------------------------------------------- */

    .card {
        background: var(--pc-paper);
        border: 2px solid var(--pc-ink);
        border-radius: 4px 4px 0 0;
        box-shadow: 4px -2px 0 rgba(27, 42, 65, .2), 0 -10px 30px rgba(15, 30, 70, .3);
    }
    .card h2 { font-family: var(--pc-display); font-weight: 400; letter-spacing: .02em; }
    .card dt { font-weight: 800; }
    .card .src { border-top: 2px dashed var(--line); color: #3d4657; }
    .card .close { color: var(--pc-ink); }

    /* -----------------------------------------------------------------
       Vraag: the launcher a coral sticker, the box a sheet of paper
       ----------------------------------------------------------------- */

    .chatlaunch {
        font-weight: 900;
        background: var(--pc-coral);
        border: 2px solid var(--pc-ink);
        box-shadow: var(--pc-shadow-hard);
        rotate: -3deg;
    }
    .chatlaunch:hover { background: var(--pc-coral); border-color: var(--pc-ink); rotate: 2deg; }
    .chatbox { border: 2px solid var(--pc-ink); border-radius: 4px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .25), 0 12px 30px rgba(15, 30, 70, .35); }
    .chathead { background: var(--pc-ink); }
    .chattitle { font-family: var(--pc-display); font-size: 14px; letter-spacing: .06em; }

    /* De uitlegfilm */
    .filmbox { border: 2px solid var(--pc-ink); border-radius: 4px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .25), 0 12px 30px rgba(15, 30, 70, .35); }
    .filmhead { background: var(--pc-ink); border-bottom: 0; }
    .filmhead h2 { font-family: var(--pc-display); font-weight: 400; font-size: 15px; letter-spacing: .06em; color: #fff; }
    .acctbox { background: var(--pc-paper); border: 2px solid var(--pc-ink); border-radius: 4px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .25), 0 12px 30px rgba(15, 30, 70, .35); }
    .card button.carddel { color: var(--pc-coral); border-color: var(--pc-coral); }
    .card button.carddel.armed { color: #fff; background: var(--pc-coral); border-color: var(--pc-ink); rotate: -1.5deg; }
    .undobar { background: var(--pc-ink); border-radius: 4px; rotate: -.5deg; }
    .filmclose, .filmclose:hover { color: #fff; }

    /* Toevoegen */
    .addveil { background: rgba(15, 25, 50, .72); }
    .addpanel { border: 2px solid var(--pc-ink); border-radius: 4px; box-shadow: 4px 6px 0 rgba(0, 0, 0, .25); }
    .addtitle { font-family: var(--pc-display); font-weight: 400; letter-spacing: .02em; }
    .addbox { border: 2px solid var(--pc-ink); border-left-width: 5px; box-shadow: 2px 2px 0 rgba(27, 42, 65, .3); }
    .addme { border-color: var(--pc-coral); background: var(--pc-field); }

    /* -----------------------------------------------------------------
       The Account tab
       ----------------------------------------------------------------- */

    .acctstyle { background: var(--pc-field); border: 2px solid var(--line); box-shadow: 2px 3px 0 rgba(27, 42, 65, .15); transition: rotate .12s ease; }
    .acctstyle:hover { border-color: var(--pc-ink); rotate: -.8deg; }
    .acctstyle[aria-checked="true"] { border: 2px solid var(--pc-ink); background: var(--pc-mustard-pale); padding: 10px 10px 14px; rotate: -.6deg; }
    .acctstylename { font-weight: 900; }
    .acctstylename em { font-style: normal; color: var(--pc-coral); }

    /* -----------------------------------------------------------------
       Login and the password pages: a paper card taped to the sunburst
       ----------------------------------------------------------------- */

    .auth {
        position: relative;
        margin-top: 64px;
        padding: 36px 28px 30px;
        background: var(--pc-paper);
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
        rotate: -.5deg;
    }
    .auth::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 50%;
        width: 110px;
        height: 28px;
        margin-left: -55px;
        background: var(--pc-tape);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
        rotate: -4deg;
    }
    .auth h1 { font-family: var(--pc-display); font-weight: 400; letter-spacing: .02em; }
    .auth h1 em { font-style: normal; color: var(--pc-coral); }
    .auth label { font-weight: 900; color: var(--pc-ink); }
    .auth input { background: var(--pc-field); border: 2px solid var(--line); border-radius: 4px; font-weight: 600; }
    .auth input:focus { outline: 0; border-color: var(--pc-ink); box-shadow: 0 0 0 3px rgba(246, 195, 67, .6); }
    .note, .err { border-width: 2px; border-radius: 3px; font-weight: 600; }

    /* -----------------------------------------------------------------
       Account and Uitloggen, top right (App.css), "Hoe werkt het?"
       calling, and Anthony's bubble
       ----------------------------------------------------------------- */

    .userbox { top: 6px; }   /* clear of the header sheet, which starts at 44px here */
    .userbox button.ctl { background: var(--pc-paper); }
    .bar #film-open.attention {
        color: #fff;
        background: var(--pc-coral);
        border-color: var(--pc-ink);
        rotate: -2deg;
        animation: pc-filmbtn-call 1.8s ease-out infinite, filmbtn-wiggle 3.6s ease-in-out infinite;
    }
    .bar #film-open.attention:hover { color: var(--pc-ink); background: var(--pc-mustard); animation-play-state: paused; }

    .anthony-say {
        background: var(--pc-paper);
        border: 2px solid var(--pc-ink);
        border-radius: 4px;
        box-shadow: var(--pc-shadow);
        font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
        font-weight: 700;
        rotate: -1.5deg;
    }
    .anthony-say::after { background: var(--pc-paper); border-color: var(--pc-ink); border-width: 2px 2px 0 0; border-style: solid; }
}

/* "Hoe werkt het?" calling, in coral, a ring of mustard going out */
@keyframes pc-filmbtn-call {
    0%   { box-shadow: 2px 2px 0 rgba(27, 42, 65, .35), 0 0 0 0 rgba(246, 195, 67, .9); }
    70%  { box-shadow: 2px 2px 0 rgba(27, 42, 65, .35), 0 0 0 10px rgba(246, 195, 67, 0); }
    100% { box-shadow: 2px 2px 0 rgba(27, 42, 65, .35), 0 0 0 0 rgba(246, 195, 67, 0); }
}

/* The tile lands with a little slap, like paper put down on the table */
@keyframes pc-tile-slap {
    from { transform: scale(1.12) rotate(-3deg); opacity: .4; }
    to   { transform: none; opacity: 1; }
}

@media (max-width: 640px) {
    :where(html[data-theme="papercut"]) header { padding: 26px 16px 18px; }
    :where(html[data-theme="papercut"]) .wrap { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    :where(html[data-theme="papercut"]) .viewtabs button[aria-selected="true"]::before { animation: none; }
    :where(html[data-theme="papercut"]) .bar #film-open.attention { animation: none; box-shadow: 0 0 0 3px var(--pc-mustard); }
}