/* New workspace dialog (#wsModal) - self-contained so it looks the same on all seven Office pages, including the five
   that do not load _add.css. The box, labels, inputs, buttons, colour swatch, spinner and toast are the #addModal rules
   from _add.css under this id; the type cards, preview line and slug line are the only new vocabulary. */
#wsModal{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;place-items:center;z-index:20}#wsModal.on{display:grid}
#wsModal *{box-sizing:border-box}#wsModal [hidden]{display:none!important}
#wsModal .box{background:#fff;border-radius:18px;padding:22px 24px;width:min(560px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:92vh;overflow:auto;color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
#wsModal h3{margin:0 0 4px;font-size:20px;font-weight:800}#wsModal .hint{color:var(--mute);font-size:13px;margin-bottom:14px;font-weight:600}
#wsModal label,#wsModal legend{display:block;font-size:12px;font-weight:800;color:var(--mute);margin:12px 0 5px;letter-spacing:.5px;text-transform:uppercase;padding:0}#wsModal .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:640px){#wsModal .two{grid-template-columns:1fr}}
#wsModal input,#wsModal select,#wsModal textarea,#wsModal .acc-btn{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
#wsModal select:focus,#wsModal input:focus,#wsModal textarea:focus{outline:none;border-color:var(--p)}
#wsModal select:focus-visible,#wsModal input:focus-visible,#wsModal textarea:focus-visible,#wsModal .acts button:focus-visible{outline:2px solid var(--p,#4169e1);outline-offset:2px}
#wsModal .acts{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
#wsModal .acts button{font:800 14px 'Plus Jakarta Sans';border-radius:12px;padding:11px 18px;border:0;cursor:pointer}
#wsModal .go{background:var(--btn);color:#fff}#wsModal .cancel{background:var(--bg);color:var(--ink)}#wsModal .acts button:disabled{opacity:.55;cursor:default}
#wsModal .opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--mute);opacity:.8}#wsModal .err{color:#b91c1c;font-weight:700;font-size:13px;min-height:18px;margin-top:8px}#wsModal .err:empty{display:none}
#wsModal input[type=color]{width:42px;height:42px;padding:3px;border-radius:10px;cursor:pointer;display:block;-webkit-appearance:none;appearance:none}#wsModal input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}#wsModal input[type=color]::-webkit-color-swatch-wrapper{padding:0}#wsModal input[type=color]::-moz-color-swatch{border:0;border-radius:7px}
#wsModal .st{color:var(--mute);font-size:13px;font-weight:700;margin-top:10px}#wsModal .st:empty{display:none}#wsModal .st.busy::before{content:"";display:inline-block;width:11px;height:11px;border:2px solid var(--line);border-top-color:var(--p);border-radius:50%;margin-right:8px;vertical-align:-1px;animation:wsspin .8s linear infinite}@keyframes wsspin{to{transform:rotate(360deg)}}
#osToast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#0b1f36;color:#fff;font:700 13px 'Plus Jakarta Sans',system-ui,sans-serif;border-radius:999px;padding:10px 16px;opacity:0;pointer-events:none;transition:.2s;z-index:80}#osToast.on{opacity:1;transform:translateX(-50%)}
/* new vocabulary: time zone + swatch row, the type cards, the preview and slug lines, the busy state */
#wsModal .two3{display:grid;grid-template-columns:1fr 42px;gap:12px;align-items:end}
#wsModal fieldset{border:0;margin:0;padding:0;min-width:0}
#wsModal .kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:640px){#wsModal .kinds{grid-template-columns:1fr}}
#wsModal .kcard{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);background:#fff;min-width:0}
#wsModal .kcard input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0}
#wsModal .kcard:hover{border-color:#cbd5e1}#wsModal .kcard:has(input:checked){border-color:var(--p);background:var(--pl)}
#wsModal .kcard:has(input:focus-visible){outline:2px solid var(--p,#4169e1);outline-offset:2px;border-color:var(--p)}
#wsModal .kcard .kt{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;color:var(--p);flex:0 0 auto}
#wsModal .kcard .kt svg{width:22px;height:22px;display:block;margin:0;vertical-align:0;color:inherit;opacity:1}
#wsModal .kcard:has(input:checked) .kt{background:#fff}
#wsModal .kcard > span:not(.kt){min-width:0}#wsModal .kcard b{display:block;font-size:14px;font-weight:800;line-height:1.3}#wsModal .kcard small{display:block;color:var(--mute);font-weight:600;font-size:12px;line-height:1.35;margin-top:1px}
#wsModal .prev{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--mute);background:var(--bg);border-radius:10px;padding:8px 12px;min-height:34px;line-height:1.4}
#wsModal .prev i{width:10px;height:10px;border-radius:3px;background:var(--acc,var(--p));flex:0 0 auto}#wsModal .prev b{color:var(--ink);font-weight:800}
#wsModal .slug{font-size:11.5px;font-weight:700;color:var(--mute);margin:5px 0 2px;overflow-wrap:anywhere}#wsModal .slug code{background:var(--bg);border-radius:6px;padding:1px 6px;font-size:11px}#wsModal .slug:empty{display:none}
#wsModal.busy .box > :not(.acts):not(.st):not(.err){opacity:.6;pointer-events:none}
/* v.2 look (mockups/office-linear-suite-v.2.html): the same dialog vocabulary as the Office pages */
#wsModal{background:rgba(2,37,79,.28)}
#wsModal .box{border-radius:12px;padding:18px 20px 16px;width:min(560px,92vw);box-shadow:0 18px 48px rgba(2,37,79,.18);font-family:var(--v2-ui,Inter,system-ui,sans-serif);color:var(--ink)}
#wsModal h3{font:600 15px/1.35 var(--v2-display,'Plus Jakarta Sans',sans-serif);color:var(--v2-head,#02254f);margin:0 0 3px}
#wsModal .hint{font:450 12.5px/1.5 var(--v2-ui);color:var(--v2-t2,#2f3d52);margin-bottom:12px}
#wsModal label,#wsModal legend{font:600 11px/1 var(--v2-ui);letter-spacing:.06em;color:var(--v2-t3,#46556b);margin:12px 0 5px}
#wsModal input,#wsModal select,#wsModal textarea,#wsModal .acc-btn{height:32px;padding:0 10px;border:1px solid var(--line,#e4ecf5);border-radius:6px;font:450 13px var(--v2-ui);color:var(--ink)}
#wsModal input:focus,#wsModal select:focus,#wsModal textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--pl,#eaeffc)}
#wsModal .kinds{gap:8px}
#wsModal .kcard{padding:10px 12px;border-radius:8px;border-color:var(--line,#e4ecf5);gap:10px}#wsModal .kcard:hover{border-color:#c5d6e8}
#wsModal .kcard:has(input:checked){border-color:var(--p);background:color-mix(in srgb,var(--p) 5%,#fff);box-shadow:0 0 0 1px var(--p)}
#wsModal .kcard .kt{width:28px;height:28px;border-radius:7px;background:var(--v2-raise,#f4f7fb);color:var(--v2-t2,#2f3d52)}#wsModal .kcard .kt svg{width:16px;height:16px;stroke-width:1.9}
#wsModal .kcard:has(input:checked) .kt{background:#fff;color:var(--p)}
#wsModal .kcard b{font:600 13px/1.3 var(--v2-display,'Plus Jakarta Sans',sans-serif);color:var(--v2-head,#02254f)}#wsModal .kcard small{font:450 12px/1.45 var(--v2-ui);color:var(--v2-t2,#2f3d52);margin-top:2px}
#wsModal .prev{font:450 12px/1.45 var(--v2-ui);color:var(--v2-t2,#2f3d52);background:var(--v2-raise,#f4f7fb);border:1px solid var(--line,#e4ecf5);border-radius:8px;padding:8px 10px;margin-top:10px}#wsModal .prev b{font-weight:600;color:var(--ink)}#wsModal .prev i{width:8px;height:8px;border-radius:2px}
#wsModal .slug{font:450 11.5px var(--v2-ui);color:var(--v2-t3,#46556b)}#wsModal .slug code{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--v2-raise,#f4f7fb)}
#wsModal .two3{grid-template-columns:1fr 32px}#wsModal input[type=color]{width:32px;height:32px;padding:2px;border-radius:6px}#wsModal input[type=color]::-webkit-color-swatch{border-radius:4px}
#wsModal .err{font:500 12.5px var(--v2-ui);color:var(--red,#b42318)}#wsModal .st{font:450 12.5px var(--v2-ui);color:var(--v2-t3,#46556b)}
#wsModal .acts{gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#e4ecf5)}
#wsModal .acts button{height:28px;padding:0 10px;border-radius:6px;border:1px solid #dbe6f2;background:#fff;color:var(--ink);font:500 12.5px var(--v2-ui);cursor:pointer;display:inline-flex;align-items:center}
#wsModal .go{background:var(--btn);border-color:var(--btn);color:#fff}#wsModal .go:hover{filter:brightness(1.06)}#wsModal .cancel:hover{background:var(--v2-hover,#eaf0f8)}
/* a legend's top margin is ignored inside a fieldset, so the gap above TYPE goes on the fieldset itself */
#wsModal fieldset{margin-top:12px}#wsModal legend{margin-top:0}#wsModal .slug:not(:empty){margin:5px 0 0}
#wsModal .two3{grid-template-columns:1fr auto}#wsModal .two3 > div:last-child{min-width:48px}#wsModal .two3 label{white-space:nowrap}


/* accent picker: a field like the inputs beside it (dot, name, hex, chevron) and a menu in the workspace switcher's style */
.acc-btn{display:flex;align-items:center;gap:10px;line-height:normal;text-align:left;cursor:pointer;color:var(--ink)}
/* the chevron survives each dialog's own field rule (an id selector) */
#wsModal .acc-btn.acc-btn,#addModal .acc-btn.acc-btn{background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2346556b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center;padding-right:32px}
.acc-btn:hover{border-color:#cbd5e1}.acc-btn:focus-visible{outline:2px solid var(--p,#4169e1);outline-offset:2px}
.acc-btn .nm{flex:0 0 auto}.acc-btn .hx,.acc-menu .hx{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--v2-t3,#46556b)}
.acc-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(2,37,79,.08) inset}
.acc-menu{min-width:240px}.acc-menu button{gap:10px}.acc-menu .hx{margin-left:12px}
.acc-menu .acc-custom{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px}.acc-menu .acc-custom .acc-dot[style*="transparent"]{box-shadow:0 0 0 1px var(--v2-rail,#d3dfec) inset}
.acc-menu .acc-custom .nm{flex:1;font:450 12.5px var(--v2-ui);color:var(--ink)}
.acc-menu .acc-custom input{width:92px;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.acc-menu .acc-custom input:focus-visible{outline:2px solid var(--p,#4169e1);outline-offset:1px}
/* 2026-09-30, the compact dialog (Wafi: too wordy and dense): one short row per type with the long text in the tooltip, two pills for
   Start with, a two-line purpose box, and the prefilled details folded under a summary line. The pill and summary rules carry the
   element name so they beat the dialog's generic label and input rules. */
#wsModal .kinds.list{grid-template-columns:1fr;gap:6px}
#wsModal .kcard.row{align-items:center;padding:7px 10px;border-radius:7px}#wsModal .kcard.row > span:not(.kt){display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#wsModal .kcard.row b{font:600 13px/1.3 var(--v2-display,'Plus Jakarta Sans',sans-serif)}#wsModal .kcard.row small{display:inline;margin:0;font:450 12.5px/1.3 var(--v2-ui);color:var(--v2-t3,#46556b)}
#wsModal .pills{display:flex;gap:8px;flex-wrap:wrap}
#wsModal label.pill{position:relative;display:inline-flex;align-items:baseline;gap:6px;width:auto;height:auto;margin:0;padding:7px 12px;border:1px solid var(--line,#e4ecf5);border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0;font:450 13px var(--v2-ui);color:var(--ink);background:#fff}
#wsModal label.pill input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;pointer-events:none}
#wsModal label.pill b{font:600 12.5px var(--v2-ui);color:var(--ink)}#wsModal label.pill small{font:450 12px var(--v2-ui);color:var(--v2-t3,#46556b)}
#wsModal label.pill:hover{border-color:#c5d6e8}#wsModal label.pill:has(input:checked){border-color:var(--p);background:color-mix(in srgb,var(--p) 5%,#fff);box-shadow:0 0 0 1px var(--p)}#wsModal label.pill:has(input:focus-visible){outline:2px solid var(--p,#4169e1);outline-offset:2px}
#wsModal textarea{height:auto;min-height:52px;padding:7px 10px;resize:vertical;line-height:1.4}
#wsModal details{margin:0}
#wsModal details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line,#e4ecf5);border-radius:7px;background:#fff;font:450 13px var(--v2-ui);color:var(--ink);min-height:32px}
#wsModal details > summary::-webkit-details-marker{display:none}#wsModal details > summary::marker{content:""}
#wsModal details > summary:hover{border-color:#c5d6e8}#wsModal details[open] > summary{border-color:var(--p);box-shadow:0 0 0 1px var(--p);background:color-mix(in srgb,var(--p) 5%,#fff)}
#wsModal details > summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--v2-t3,#46556b);border-bottom:1.5px solid var(--v2-t3,#46556b);transform:rotate(45deg);margin:0 4px 3px auto;transition:transform .15s;flex:0 0 auto}#wsModal details[open] > summary::after{transform:rotate(-135deg);margin-bottom:-3px}
#wsModal details > summary .sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#wsModal details > summary .sum i{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:-1px;margin-left:2px}
#wsModal details > summary:focus-visible{outline:2px solid var(--p,#4169e1);outline-offset:2px}
#wsModal details[open] > div,#wsModal details[open] > div.two{margin-top:0}
/* Start with: two square cards side by side, so the choice reads differently from the type rows (Wafi, 2026-09-30) */
#wsModal .kinds.squares{grid-template-columns:1fr 1fr;gap:8px}
#wsModal .kcard.square{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 12px 12px;border-radius:8px}
#wsModal .kcard.square .kt{width:34px;height:34px;border-radius:9px}#wsModal .kcard.square .kt svg{width:18px;height:18px}
#wsModal .kcard.square > span:not(.kt){display:block;min-width:0}#wsModal .kcard.square b{display:block;font:600 13px/1.3 var(--v2-display,'Plus Jakarta Sans',sans-serif)}#wsModal .kcard.square small{display:block;margin-top:2px;font:450 12px/1.35 var(--v2-ui);color:var(--v2-t3,#46556b)}

/* 2026-09-30, three tones instead of one (Wafi: the window feels too white): the box sits on the Office's raised ground, the type
   list and the Start with pair are grouped in white panels with a hairline, controls stay white on the ground, the footer is a
   band in the ground tone, and the selected row gets a blue fill and a blue icon tile */
#wsModal .box{background:#fbfbfb;padding-bottom:0;overflow:hidden;display:flex;flex-direction:column;max-height:92vh}
#wsModal .box > *{flex:0 0 auto}
#wsModal .box{scrollbar-gutter:stable}
#wsModal .kinds.list{display:block;border:1px solid var(--v2-rail,#d3dfec);border-radius:8px;background:#fff;overflow:hidden}
#wsModal .kinds.list .kcard.row{border:0;border-radius:0;border-top:1px solid var(--line,#e4ecf5);background:#fff;padding:8px 10px}#wsModal .kinds.list .kcard.row:first-child{border-top:0}
#wsModal .kinds.list .kcard.row:hover{background:var(--v2-raise,#f4f7fb);border-color:var(--line,#e4ecf5)}
#wsModal .kinds.list .kcard.row:has(input:checked){background:var(--pl,#eaeffc);box-shadow:inset 3px 0 0 var(--p);border-color:var(--line,#e4ecf5)}
#wsModal .kcard .kt{background:var(--v2-hover,#eaf0f8);color:var(--v2-t2,#2f3d52)}#wsModal .kcard:has(input:checked) .kt{background:var(--p);color:#fff}
#wsModal .kinds.squares{background:#fff;border:1px solid var(--v2-rail,#d3dfec);border-radius:8px;padding:8px;gap:8px}
#wsModal .kcard.square{border-color:var(--line,#e4ecf5);background:#fff}#wsModal .kcard.square:hover{background:var(--v2-raise,#f4f7fb)}
#wsModal .kcard.square:has(input:checked){background:var(--pl,#eaeffc);border-color:var(--p);box-shadow:0 0 0 1px var(--p)}
#wsModal input,#wsModal select,#wsModal textarea,#wsModal .acc-btn,#wsModal details > summary{border-color:var(--v2-rail,#d3dfec)}
#wsModal input::placeholder,#wsModal textarea::placeholder{color:var(--v2-t4,#627187)}
#wsModal .acts{margin:16px -20px 0;padding:12px 20px;background:#fff;border-top:1px solid var(--v2-rail,#d3dfec)}
#wsModal .cancel{background:#fff;border:1px solid var(--v2-rail,#d3dfec)}
/* Start with, again (Wafi: the framed squares felt out of place): two plain white cards side by side, icon left and the text
   stacked, the same border and radius as the type panel, no frame around them */
#wsModal .kinds.squares{background:transparent;border:0;padding:0;gap:8px}
#wsModal .kcard.square{flex-direction:row;align-items:flex-start;text-align:left;gap:10px;padding:10px 12px;border:1px solid var(--v2-rail,#d3dfec);border-radius:8px;background:#fff}
#wsModal .kcard.square .kt{width:28px;height:28px;border-radius:7px;margin-top:1px}#wsModal .kcard.square .kt svg{width:16px;height:16px}
#wsModal .kcard.square b{font:600 13px/1.3 var(--v2-display,'Plus Jakarta Sans',sans-serif)}#wsModal .kcard.square small{margin-top:1px;font:450 12px/1.35 var(--v2-ui)}