/* Idunframe styles. Loaded by index.html. */
/* =====================================================================
DESIGN TOKENS
Every colour and font is defined once here. Change a value to restyle
the whole app. The light theme is the default; the two blocks below
repeat the same names with dark values (one for the device's dark
mode, one for an explicit data-theme="dark" switch).
--cut the pink accent (matches the magenta cutting-machine line colour)
--mat the green cutting-mat background of the preview
===================================================================== */
/* Brand: Idunframe "Deep lagoon" with frosted glass (chosen 27 Sep 2026), in the
"Balanced greys" treatment (mockup A, chosen 27 Sep): neutral grey glass, near-black
fields and tiles, charcoal backdrop with a softer teal and plum glow.
Palette: 006466 065A60 0B525B 144552 1B3A4B 212F45 272640 312244 3E1F47 4D194D,
plus white, greys and near-black. Dark-first: glass panels float over a teal-to-plum
backdrop; the cutting mat stays solid (its original green) so artwork is always judged on an even colour.
Roles: --accent (teal) buttons and controls · --accent-2 (light teal) highlights ·
--cut (soft pink) cut lines only, the colour that stands out best on the teal mat. */
:root{
color-scheme:dark;
--ground:#16181b; /* page base under the gradient */
--panel:rgba(200,204,208,.07); /* frosted glass (neutral grey) */
--panel-solid:rgba(24,26,30,.9); /* glass for menus, dialogs, tips */
--glass-edge:rgba(255,255,255,.12); --glass-shine:rgba(255,255,255,.07);
--ink:#f2f5f4; --muted:#a4a8ad; --line:rgba(255,255,255,.1); --field:rgba(0,0,0,.38);
--accent:#006466; --accent-hover:#0B525B; --accent-2:#5FC7BD; --accent-soft:rgba(95,199,189,.14);
--cut:#E7A9D9; --cut-soft:rgba(231,169,217,.16);
--mat:#1d5a45; --mat-line:rgba(236,255,244,.13); --mat-major:rgba(236,255,244,.26); --mat-text:rgba(236,255,244,.55); /* the original green cutting mat, restored 29 Sep at the creator's request */
--good:#72dcb4; --good-soft:rgba(0,0,0,.3); --warn:#f2bd6b; --warn-soft:rgba(242,189,107,.13);
--focus:#5FC7BD;
--blur:blur(18px) saturate(150%);
--display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
--body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
--mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
/* =====================================================================
LAYOUT & COMPONENTS
.app two columns: control panel (aside) + preview (.stage);
stacks to one column under 860px wide
.seg segmented button groups (e.g. Contour / Circle / Rounded)
.matbox the green cutting-mat preview (an drawn by render())
.stats four summary tiles under the mat
.card one card per sticker/element, built by renderCards()
#board the design-board , drawn by paintBoard()
===================================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background-color:var(--ground);background-image:radial-gradient(1000px 650px at 6% -10%, rgba(0,100,102,.42), transparent 60%), radial-gradient(850px 650px at 104% 106%, rgba(77,25,77,.38), transparent 60%), linear-gradient(160deg,#252a30 0%,#1d2126 45%,#1a1b20 75%,#1f1a24 100%);background-attachment:fixed;min-height:100vh;color:var(--ink);font:15px/1.5 var(--body);padding-inline:16px;padding-block:20px 40px}
.wrap{max-width:1180px;margin:0 auto;display:grid;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-block:14px 26px;margin-bottom:12px;border-bottom:1px solid var(--line)} /* breathing room between the wordmark/nav and the tool */
.tabs{display:flex;flex-wrap:wrap;gap:3px;background:var(--field);border:1px solid var(--line);border-radius:11px;padding:3px;margin-left:auto}
.tabs button{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:8px;font-weight:600}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="page"]{background:#f2f5f4;color:#0f1a24;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.settings-list{min-width:230px;gap:10px;padding:12px}
.settings-list .units{justify-content:space-between}
/* dropdowns for pick-one choices */
.icon-btn{display:inline-grid;place-items:center;padding:0;min-width:36px;height:36px}
.icon-btn .ico{width:18px;height:18px;display:block}
.card .dl .icon-btn{height:32px;min-width:0}
.card .dl .icon-btn .ico{width:17px;height:17px}
.tabs .icon-btn{min-width:38px;height:auto;padding:8px 10px}
#settingsMenu > summary.icon-btn{width:40px;height:38px}
#settingsMenu > summary.icon-btn::after{content:none}
.dd{display:block}
.dd-sum{display:flex;align-items:center;gap:9px;background:var(--field);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-weight:500;font-size:14px}
.dd-sum::after{margin-left:auto}
.dd-list{left:0;right:0;min-width:0;background:rgba(22,24,28,.98)}
.settings-list{background:rgba(22,24,28,.98)}
.dd-list > button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.dd-sw{width:16px;height:16px;border-radius:5px;flex:none;border:1px solid var(--glass-edge);background:transparent}
.dd-sw:not([data-v]),.dd-sw[data-v=""]{display:none}
.dd:not(#edgeSegDD) .dd-sw{display:none}
#edgeSegDD .dd-sw[data-v="none"],#edgeSeg [data-v="none"]::before{background:repeating-conic-gradient(#8a8f95 0 25%,#c8ccd0 0 50%) 0 0/8px 8px}
#edgeSegDD .dd-sw[data-v="sticker"],#edgeSeg [data-v="sticker"]::before{background:#fff}
#edgeSegDD .dd-sw[data-v="holo"],#edgeSeg [data-v="holo"]::before{background:linear-gradient(135deg,#ffd6f2,#c9e8ff,#d8ffe9,#fff4c4)}
#edgeSegDD .dd-sw[data-v="clear"],#edgeSeg [data-v="clear"]::before{background:rgba(255,255,255,.25)}
#edgeSegDD .dd-sw[data-v="outline"],#edgeSeg [data-v="outline"]::before{background:#15201a;border-color:#5b6068}
#edgeSegDD .dd-sw[data-v="vintage"],#edgeSeg [data-v="vintage"]::before{background:#efe2c4}
#edgeSegDD .dd-sw[data-v="scrapbook"],#edgeSeg [data-v="scrapbook"]::before{background:linear-gradient(90deg,#f4eee2 60%,#f7c6d9 60%)}
#edgeSegDD .dd-sw[data-v="royal"],#edgeSeg [data-v="royal"]::before{background:#fbf6ea;box-shadow:inset 0 0 0 2px #b8913a}
#edgeSeg > button::before{content:"";width:14px;height:14px;border-radius:4px;margin-right:9px;flex:none;border:1px solid var(--glass-edge)}
#edgeSeg > button{display:flex;align-items:center}
/* pages (Library, Resources, Help) */
.page{display:grid;gap:16px;margin-top:6px}
/* footer on every tab: beta notice, copyright and a way to Help & Support */
.site-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.site-foot p{margin:0}
.site-foot button.link{all:unset;cursor:pointer;color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.site-foot button.link:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:3px}
.beta-tag{display:inline-block;font:700 10.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#5FC7BD;border:1px solid rgba(95,199,189,.55);border-radius:999px;padding:3px 7px;vertical-align:middle}
.head-beta{margin-left:10px;position:relative;top:-.35em}
.page h2{font:700 26px/1.2 var(--display);margin:0}
.page .lede{color:var(--muted);margin:0}
.page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.page-card{background:var(--panel);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:14px;padding:18px;display:grid;gap:8px;align-content:start}
/* Resources guide: live pictures of each control beside what it does */
.page-sub{font:700 18px/1.3 var(--display);margin:14px 0 0}
.guide-tools{display:grid;gap:10px}
.guide-tools input{font:500 14px/1.4 var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:9px;padding:10px 12px;max-width:520px}
.guide-jump{display:flex;flex-wrap:wrap;gap:6px}
.guide-jump button{height:auto;padding:6px 11px;font-size:13px;border-radius:999px}
#guide{display:grid;gap:26px}
.guide-sec{display:grid;gap:10px;scroll-margin-top:16px}
.guide-sec > h3{font:700 17px/1.3 var(--display);margin:0;padding-bottom:6px;border-bottom:1px solid var(--line)}
.guide-list{display:grid;gap:12px}
.guide-item{display:grid;grid-template-columns:minmax(0,var(--w,320px)) minmax(0,1fr);gap:18px;align-items:start;background:var(--panel);border:1px solid var(--glass-edge);border-radius:14px;padding:14px}
.guide-text h4{margin:0 0 4px;font:700 15px/1.3 var(--body);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.guide-text p{margin:0 0 6px;font-size:14px}
.guide-text .where{font:600 10.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 7px}
.shot{width:100%;max-width:var(--w,320px);overflow:hidden;border-radius:12px;pointer-events:none;user-select:none}
.shot .app, .shot .stage, .shot .wrap{display:block}
.shot header{border:0;padding:0;margin:0;display:block}
.shot aside{max-width:320px;padding:12px;gap:12px}
.shot .menu-list{position:static;margin-top:6px;box-shadow:none}
.shot .menu{display:inline-block}
.shot .save-bar{position:static;transform:none;box-shadow:none}
.shot details.fold > .fold-body{display:grid}
.shot .shot-hl{outline:2px solid #5FC7BD;outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px rgba(95,199,189,.18)}
.shot-ph{margin:0;padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px}
.guide-item.wide{grid-template-columns:minmax(0,1fr)}
@media (max-width:760px){.guide-item{grid-template-columns:1fr}}
.page-card h3{font:700 16px/1.3 var(--display);margin:0}
.page-card p{margin:0;color:var(--muted)}
.page-card ol,.page-card ul{margin:0;padding-left:20px;display:grid;gap:5px;font-size:14px}
.help-form{max-width:640px;gap:14px}
.help-form select,.help-form textarea,.help-form input[type=email]{font:500 14px/1.4 var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:9px;padding:10px 12px;width:100%}
.help-form textarea{resize:vertical}
.help-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
h1{font:800 clamp(30px,4.4vw,46px)/1 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 .dash{color:var(--accent-2)}
/* Wordmark (chosen 27 Sep 2026, "B3 interlocked"): Idun + the teal circuit rune + frame.
The rune echoes the colon and the rune-and-circuit U of the creator's IDUN: frame logo,
and tucks under the f's crossbar so it joins the two words. Drawn at 120 px type:
baseline y=142, dots at x-height and baseline. */
.wordmark{display:inline-flex;align-items:baseline;letter-spacing:-.012em;white-space:nowrap}
.wordmark .rune{color:#f2f5f4;position:relative;display:inline-block;width:.283em;height:1em;margin:0 -.04em 0 .02em;z-index:1} /* spacing tuned at header size: the f's crossbar just meets the rune */
.wordmark .rune svg{position:absolute;left:0;bottom:-.183em;width:100%;height:1.35em;overflow:visible}
.wordmark .rune svg g[fill="none"] *{stroke-width:1.4px;vector-effect:non-scaling-stroke}
h2{font:700 20px/1.2 var(--display);margin:0}
.tag{color:var(--muted);margin:0;max-width:56ch}
.app{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.app{grid-template-columns:1fr}.stage{order:-1}}
aside{background:var(--panel);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-shine), 0 18px 40px rgba(0,0,0,.22);border-radius:14px;padding:18px;display:grid;gap:20px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
legend{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:10px}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.drop .name{flex:1 1 100%;min-width:0;font:12.5px/1.35 var(--mono);color:var(--muted);overflow-wrap:anywhere}
button,.btn,.btn-like{font:600 13px/1 var(--body);border-radius:8px;border:1px solid var(--line);background:rgba(40,43,48,.75);color:var(--ink);padding:9px 12px;cursor:pointer;position:relative}
button:hover,.btn:hover{border-color:var(--ink)}
button:focus-visible,input:focus-visible,.btn:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.btn input{position:absolute;opacity:0;width:1px;height:1px}
.seg{display:grid;grid-template-columns:repeat(var(--n,3),1fr);background:var(--field);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:8px 4px;border-radius:6px;font-weight:500}
.seg button[aria-pressed="true"]{background:#f2f5f4;color:#0f1a24;box-shadow:0 1px 3px rgba(0,0,0,.3);font-weight:600}
.row{display:grid;gap:6px}
.row label{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.row output{font:600 13px/1.4 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{font-size:12.5px;color:var(--muted);margin:0}
/* a control that has no effect on the current picture: shown greyed out with a reason, never hidden */
.row.off > label, .row.off > input, .check.off{opacity:.45}
input[type=range]{width:100%;accent-color:var(--accent-2)}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{accent-color:var(--accent-2);width:16px;height:16px}
.stage{display:grid;gap:12px;min-width:0}
.matbox{position:relative;border-radius:14px;overflow:hidden;background:var(--mat);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.matbox.dragging{box-shadow:inset 0 0 0 3px var(--accent-2)}
#mat{display:block;width:100%;height:auto;max-height:72vh}
.mat-note{position:absolute;left:12px;bottom:10px;font:11px/1 var(--mono);color:var(--mat-text);letter-spacing:.04em;pointer-events:none}
.err{position:absolute;inset:auto 12px 34px 12px;background:var(--panel);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:14px}
.cutline{fill:none;stroke:var(--cut);stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.stk{cursor:pointer}
.stk.sel .cutline{stroke-dasharray:none;stroke-width:3}
.stk .num{font:600 1px var(--mono)}
#mat.cutting .stk .cutline{visibility:hidden}
#cutAll{stroke-dasharray:none;vector-effect:none}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:12px;overflow:hidden}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:rgba(8,9,11,.55);padding:12px 14px;display:grid;gap:4px;min-width:0;align-content:start}
.stat span{font:600 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat b{font:600 17px/1.2 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat small{font:12px/1.3 var(--mono);color:var(--muted)}
.stat button.link{all:unset;cursor:pointer;color:var(--accent-2);font:600 12px/1.3 var(--mono);text-decoration:underline;text-underline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;border-radius:999px;padding:5px 11px 5px 9px;display:inline-flex;gap:7px;align-items:center}
.chip::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.primary{background:var(--accent);border-color:rgba(95,199,189,.45);color:#fff}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.primary:hover{border-color:var(--ink)}
.toast{font:13px/1.3 var(--body);color:var(--muted)}
.save-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:40;
display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;
background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:14px}
.save-bar b{overflow-wrap:anywhere}
.save-bar a.btn{text-decoration:none}
.save-bar #saveBarClose{padding:6px 10px}
.install-steps{margin:8px 0;padding-left:20px;display:grid;gap:6px}
/* Hover tips: one shared bubble (#tip) positioned by the "Hover tips" script section. */
#tip{position:fixed;z-index:50;left:0;top:0;max-width:220px;background:rgba(10,18,26,.82);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:#fff;font:500 12px/1.4 var(--body);
padding:5px 9px;border-radius:7px;box-shadow:0 3px 10px rgba(0,0,0,.12);pointer-events:none;
opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s ease, transform .14s ease, visibility .14s}
#tip.show{opacity:1;visibility:visible;transform:none}
#tip::after{content:none}
#tip[data-side="top"]::after{bottom:-4px}
#tip[data-side="bottom"]::after{top:-4px}
.tips-toggle{font-size:13px;color:var(--muted)}
.info{all:unset;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line);
color:var(--muted);font:600 10px/1 var(--body);font-style:italic;cursor:pointer;vertical-align:1px;margin-left:3px}
.info:hover,.info:focus-visible,.info[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
/* Dropdown menus (