/* WORKSHOP SIMULATOR: the few pieces only these screens have. Brand colours only. (c) 2026 Hublinko Limited */
.ws-bigq{background:var(--navy,#1D3557);color:#fff;border-radius:22px;padding:26px 30px;font-family:'DM Serif Display',Georgia,serif;font-size:clamp(22px,2.6vw,30px);line-height:1.25;margin:6px 0 18px}
.ws-bigq em{color:#C8DEC8;font-style:normal}
.ws-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:4px 0 16px}
.ws-vs>div{background:#F5F6F8;border:1.5px solid #E5E7EB;border-radius:16px;padding:16px 18px}
.ws-vs>div.hot{background:#1D3557;border-color:#1D3557;color:#fff}.ws-vs>div.hot p{color:rgba(255,255,255,.88)}
.ws-vs b{display:block;font-size:17px;margin-bottom:4px}.ws-vs p{font-size:15px;line-height:1.5}
.ws-vs span{align-self:center;font-family:'DM Serif Display',serif;font-size:26px;color:#E63946}
.ws-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.ws-chips span{border-radius:100px;padding:9px 16px;font-weight:800;font-size:14.5px;background:#fff;border:2px solid #E5E7EB;color:#1D3557}
.ws-chips span.hot{background:#E63946;border-color:#E63946;color:#fff}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 16px}
.ws-grid.four{grid-template-columns:repeat(4,1fr)}
.ws-grid>div{background:#F5F6F8;border:1.5px solid #E5E7EB;border-radius:16px;padding:16px 18px}
.ws-grid b{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:20px;line-height:1.15;margin-bottom:6px;color:#1D3557}
.ws-grid p{font-size:15px;line-height:1.5}
.ws-grid .navy{background:#1D3557;border-color:#1D3557}.ws-grid .navy b{color:#fff}.ws-grid .navy p{color:rgba(255,255,255,.88)}
.ws-grid .coral{background:#E63946;border-color:#E63946}.ws-grid .coral b{color:#fff}.ws-grid .coral p{color:rgba(255,255,255,.94)}
.ws-grid .sage{background:#C8DEC8;border-color:#C8DEC8}
.ws-probs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 16px}
.ws-probs>div{background:#fff;border:1.5px solid #E5E7EB;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.ws-probs .p{padding:14px 18px;background:rgba(230,57,70,.15);font-weight:800;font-size:15.5px;color:#1D3557}
.ws-probs .f{padding:12px 18px;font-size:15px;line-height:1.5;flex:1}
.ws-probs .f b{display:block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:#6B7280;margin-bottom:2px}
.ws-probs .navy{background:#1D3557;border-color:#1D3557}.ws-probs .navy .p{background:transparent;color:#fff;font-family:'DM Serif Display',serif;font-weight:400;font-size:20px}.ws-probs .navy .f{color:rgba(255,255,255,.88)}
.ws-meter{background:#fff;border:1.5px solid #E5E7EB;border-radius:18px;padding:18px 20px;margin:4px 0 12px}
.ws-meter>b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;margin-bottom:10px}
.ws-meter .bar{display:grid;grid-template-columns:3fr 4fr 3fr;border-radius:100px;overflow:hidden;font-weight:800;font-size:14px;text-align:center}
.ws-meter .bar div{padding:13px 8px}
.ws-meter .a{background:#E5E7EB;color:#6B7280}.ws-meter .b{background:#C8DEC8;color:#122440}.ws-meter .c{background:rgba(230,57,70,.15);color:#c0202d}
.ws-meter p{text-align:center;margin-top:10px;font-weight:600;color:#6B7280;font-size:15px}
.ws-ask{text-align:center;font-family:'DM Serif Display',serif;font-size:clamp(22px,2.6vw,28px);margin:8px 0 6px;color:#1D3557}
.ws-ask em{color:#E63946;font-style:normal}
.ws-lens{display:grid;gap:12px;margin:4px 0 18px}
.ws-lens .len{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center}
.ws-lens .lab{font-weight:800;font-size:15.5px}.ws-lens .lab small{display:block;font-weight:600;color:#6B7280;font-size:13px}
.ws-lens .track{background:#E5E7EB;border-radius:100px;height:42px;overflow:hidden}
.ws-lens .fill{min-width:max-content;height:100%;border-radius:100px;display:flex;align-items:center;padding:0 16px;font-weight:800;font-size:14px;color:#fff;white-space:nowrap}
.ws-lens .fill.sage{background:#C8DEC8;color:#122440}.ws-lens .fill.navy{background:#1D3557}.ws-lens .fill.coral{background:#E63946}.ws-lens .fill.grey{background:#6B7280}
.ws-time{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 16px}
.ws-time>div{text-align:center;background:#F5F6F8;border-radius:16px;padding:14px 10px}
.ws-time i{font-style:normal;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1D3557;color:#fff;font-weight:800;margin:0 auto 8px}
.ws-time>div:nth-child(3) i{background:#E63946}
.ws-time b{display:block;font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:#E63946}
.ws-time p{font-size:15px;font-weight:600}
.ws-endbtns{margin:6px 0 4px}

/* the planner */
.wsf label.l{display:block;font-weight:800;font-size:15px;margin:18px 0 8px;color:#1D3557}
.wsf label.l small{display:block;font-weight:500;color:#6B7280;font-size:13.5px}
.wsf input[type=text],.wsf textarea,.wsf select{width:100%;padding:13px 15px;border:2px solid #E5E7EB;border-radius:14px;font:inherit;font-size:16px;line-height:1.5;color:#1D3557;background:#fff;box-sizing:border-box}
.wsf input[type=text]:focus,.wsf textarea:focus,.wsf select:focus{outline:none;border-color:#E63946;box-shadow:0 0 0 4px rgba(230,57,70,.12)}
.wsf ::placeholder{color:#6B7280;opacity:.8}
.wsf textarea{min-height:110px;resize:vertical}
.wsf .row3{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14px}
.wsf .count{display:inline-block;margin-top:10px;font-weight:800;font-size:14px;border-radius:100px;padding:6px 14px;background:#F5F6F8}
.wsf .count.ok{background:#C8DEC8}.wsf .count.warn{background:rgba(230,57,70,.15);color:#c0202d}
.wsf .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.wsf .btn-ghost{background:#fff;color:#1D3557;border:2px solid #E5E7EB;border-radius:100px;padding:12px 22px;font:800 15px 'DM Sans',sans-serif;cursor:pointer}
.wsf .btn-ghost:hover{border-color:#1D3557}
.wsf .ag{display:grid;grid-template-columns:96px 1fr;margin-top:6px}
.wsf .ag .t{font-weight:800;font-size:14px;padding:16px 12px 16px 0;text-align:right;color:#6B7280}
.wsf .ag .t b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;color:#1D3557;line-height:1}
.wsf .ag .blk{border-left:4px solid #E63946;padding:14px 20px;margin:5px 0;background:#F5F6F8;border-radius:0 16px 16px 0}
.wsf .ag .blk.main{background:#1D3557;color:#fff;border-color:#C8DEC8}
.wsf .ag .blk h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;margin:0 0 4px;color:#1D3557}
.wsf .ag .blk.main h3{color:#fff}.wsf .ag .blk p{font-size:15px;line-height:1.55;margin:0}.wsf .ag .blk.main p{color:rgba(255,255,255,.88)}
.wsf .prog{height:12px;background:#F5F6F8;border-radius:100px;overflow:hidden;margin:4px 0 6px}
.wsf .prog div{height:100%;background:#1D3557;border-radius:100px;transition:width .3s}
.wsf .progt{font-weight:800;font-size:14px;color:#6B7280}
.wsf .ck{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#F5F6F8;border-radius:14px;margin-top:8px;cursor:pointer;border:2px solid transparent;font-size:16px}
.wsf .ck .box{width:26px;height:26px;border-radius:8px;border:2.5px solid #1D3557;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:#fff}
.wsf .ck.on{background:rgba(200,222,200,.35);border-color:#C8DEC8}
.wsf .ck.on .box{background:#1D3557}.wsf .ck.on .box::after{content:"✓"}
.wsf .ck.on .tx{text-decoration:line-through;color:#6B7280}
.wsf .fc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.wsf .fcard{border-radius:18px;border:1.5px solid #E5E7EB;padding:18px;background:#fff;display:flex;flex-direction:column;gap:6px}
.wsf .fcard h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;margin:0;color:#1D3557}
.wsf .fcard p{font-size:15px;line-height:1.5;margin:0}
.wsf .fcard .say{margin-top:auto;background:#1D3557;color:#fff;border-radius:14px 14px 14px 4px;padding:11px 15px;font-weight:700;font-size:15px}
.wsf .fcard .say::before{content:"Say: ";color:#C8DEC8;font-weight:800}
.wsf h3.fu{font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;margin:20px 0 4px;color:#1D3557}
.wsf h3.fu small{display:block;font-family:'DM Sans',sans-serif;font-size:14px;color:#6B7280;margin-top:2px}
.wsf .tip{display:flex;gap:12px;align-items:flex-start;border:2px dashed #E63946;border-radius:18px;padding:14px 18px;margin-top:18px}
.wsf .tip img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.wsf .tip b{display:block;color:#E63946;font-size:12px;letter-spacing:1.2px;text-transform:uppercase}
.wsf .tip p{font-size:15.5px;font-weight:600;margin:0}
.ws-toast{position:fixed;left:50%;top:90px;transform:translateX(-50%);background:#C8DEC8;color:#1D3557;padding:13px 22px;border-radius:100px;font-weight:800;font-size:15px;box-shadow:0 8px 24px rgba(29,53,87,.18);z-index:99999;max-width:calc(100vw - 32px);text-align:center}
.hd .jo-tour{margin-left:auto;white-space:nowrap}
@media(max-width:640px){#app .card .hd{flex-wrap:wrap}.hd .jo-tour{margin-left:0;padding:10px 18px;font-size:14px}}
@media(max-width:900px){.ws-grid,.ws-grid.four,.ws-probs{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ws-grid,.ws-grid.four,.ws-probs,.ws-vs,.wsf .row3,.wsf .fc{grid-template-columns:1fr}.ws-vs span{text-align:center}
  .ws-lens .len{grid-template-columns:1fr;gap:6px}.ws-time{grid-template-columns:1fr 1fr}
  .ws-meter .bar{font-size:11.5px}.wsf .ag{grid-template-columns:60px 1fr}.wsf .ag .t b{font-size:19px}.wsf .ag .t{font-size:11.5px;padding-right:8px}}

/* text on the light boxes is always navy, whatever card they sit in */
.ws-grid>div:not(.navy):not(.coral) b,.ws-grid>div:not(.navy):not(.coral) p,.ws-probs>div:not(.navy) .p,.ws-probs>div:not(.navy) .f,.ws-vs>div:not(.hot) b,.ws-vs>div:not(.hot) p,.ws-time p,.ws-lens .lab{color:#1D3557}
.ws-probs>div:not(.navy) .f b,.ws-lens .lab small{color:#6B7280}