/* ==========================================================================
   BA Hub simulation master: Your progress.
   The panel down the left of every screen. One file for all four designs
   (a page, Conversations, the wheel, the grid). Brand colours only.
   © 2026 Hublinko Limited
   ========================================================================== */
.flow,.flow-rail,.flow-btn{--coral:#E63946;--navy:#1D3557;--sage:#C8DEC8;--paper:#F5F6F8;--border:#E5E7EB;--grey:#6B7280;font-family:'DM Sans',system-ui,sans-serif;line-height:1.5}
.flow *{box-sizing:border-box}
.flow-btn{font-weight:700;font-size:14px;padding:9px 16px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--navy)}
.flow-btn.loose{position:fixed;left:12px;top:12px;z-index:298;box-shadow:0 8px 20px rgba(29,53,87,.18)}
/* ---------- your progress: the steps of the project, down the left of every screen ---------- */
.flow{position:fixed;left:0;top:0;bottom:0;width:272px;background:#fff;border-right:1.5px solid var(--border);z-index:300;display:flex;flex-direction:column}
.has-flow{padding-left:272px}
.flow-hd{padding:22px 20px 12px;display:flex;align-items:flex-start;gap:10px}
.flow-hd small{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--coral)}
.flow-hd b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;line-height:1.15;color:var(--navy)}
.flow-hd .x{display:none;margin-left:auto;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:#fff;color:var(--navy);font-size:15px;cursor:pointer}
.flow-meter{padding:0 20px 16px;border-bottom:1.5px solid var(--border)}
.flow-meter span{font-size:14px;color:var(--grey)}
.flow-meter span b{color:var(--navy);font-weight:800}
.flow-meter .bar{height:8px;border-radius:100px;background:var(--border);margin-top:7px;overflow:hidden}
.flow-meter .bar i{display:block;height:100%;width:0;background:var(--sage);border-radius:100px;box-shadow:inset 0 0 0 1.5px rgba(29,53,87,.18);transition:width .4s ease}
.flow-list{flex:1;overflow-y:auto;padding:6px 12px 24px}
.flow-g{border-bottom:1.5px solid var(--border);padding:6px 0}
.flow-g:last-child{border-bottom:0}
.flow-ph{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:10px 8px;font-family:inherit;cursor:pointer;color:var(--navy)}
.flow-ph:hover{background:var(--paper)}
.flow-ph .nm{font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--navy);line-height:1.35}
.flow-ph .meta{grid-column:1;font-size:12.5px;color:var(--grey);line-height:1.3}
.flow-ph .meta .tk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--sage);color:var(--navy);font-style:normal;font-size:10px;font-weight:900;margin-right:6px;vertical-align:1px}
.flow-ph .ch{grid-column:2;grid-row:1 / span 2;font-style:normal;font-size:18px;line-height:1;color:var(--grey);transition:transform .2s}
.flow-g.shut .ch{transform:rotate(-90deg)}
.flow-g.shut ol{display:none}
.flow-list small{display:block;font-size:12px;color:var(--grey);font-weight:500;margin-top:1px}
.flow-meter .left{display:block;font-size:12.5px;margin-top:6px}
.flow-hd .fold{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:#fff;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;flex:none}
.flow-hd .fold:hover,.flow-rail:hover{border-color:var(--navy)}
.flow-rail{display:none;position:fixed;left:0;top:0;bottom:0;width:52px;background:#fff;border:0;border-right:1.5px solid var(--border);z-index:300;cursor:pointer;font-family:inherit;color:var(--navy);flex-direction:column;align-items:center;gap:12px;padding:18px 0}
.flow-rail i{font-style:normal;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.flow-rail b{font-size:12px;font-weight:800;background:var(--sage);border-radius:100px;padding:3px 7px}
.flow-rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey)}
.flow-min .flow{display:none}
.flow-min .flow-rail{display:flex}
.flow-min.has-flow{padding-left:52px}
.flow-list ol{list-style:none;margin:0;padding:0}
.flow-list li{position:relative}
.flow-list li a,.flow-list li .r{display:flex;gap:11px;align-items:flex-start;padding:8px;border-radius:12px;text-decoration:none;color:var(--navy);font-size:14.5px;line-height:1.35}
.flow-list li a:hover{background:var(--paper)}
.flow-list .m{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:900;color:var(--navy);margin-top:-1px}
.flow-list li.done .m{background:var(--sage);border-color:var(--sage)}
.flow-list li.done .t{font-weight:600}
.flow-list li.todo .t{color:var(--grey)}
.flow-list li.here .r{background:var(--paper);box-shadow:inset 3px 0 0 var(--coral)}
.flow-list li.here .t{font-weight:800;color:var(--navy);display:block}
.flow-list .w{display:block;min-width:0}
.flow-list li.here:not(.done) .m{border-color:var(--coral)}
.flow-list li em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--coral);margin-top:2px}
.flow-shade{display:none}
.flow-btn{display:none;align-items:center;gap:8px;cursor:pointer;font-family:inherit}
.flow-btn b{padding:2px 8px;border-radius:100px;background:var(--sage);color:var(--navy);font-size:12.5px;font-weight:800}
@media(max-width:1180px){
  .has-flow,.flow-min.has-flow{padding-left:0}
  .flow-min .flow{display:flex}
  .flow-min .flow-rail,.flow-hd .fold{display:none}
  .flow{width:300px;max-width:88vw;transform:translateX(-105%);transition:transform .25s ease;box-shadow:18px 0 50px rgba(18,36,64,.25)}
  .flow-open .flow{transform:none}
  .flow-open .flow-shade{display:block;position:fixed;inset:0;background:rgba(18,36,64,.45);z-index:299}
  .flow-hd .x{display:block}
  .flow-btn{display:inline-flex}
}
@media(max-width:600px){.flow-btn,.nav .flow-btn{position:fixed;left:14px;bottom:22px;z-index:240;box-shadow:0 10px 26px rgba(29,53,87,.22);border-color:var(--navy);font-size:14px;padding:10px 16px}.flow-btn span{display:none}.flow-btn::before{content:'Progress'}}
/* ---------- a tool screen that fills the window: the panel is a drawer behind a button, at any width ---------- */
.flow-drawer.has-flow,.flow-drawer.flow-min.has-flow{padding-left:0}
.flow-drawer.flow-min .flow{display:flex}
.flow-drawer.flow-min .flow-rail,.flow-drawer .flow-hd .fold{display:none}
.flow-drawer .flow{width:300px;max-width:88vw;transform:translateX(-105%);transition:transform .25s ease;box-shadow:18px 0 50px rgba(18,36,64,.25);z-index:100001}
.flow-drawer.flow-open .flow{transform:none}
.flow-drawer.flow-open .flow-shade{display:block;position:fixed;inset:0;background:rgba(18,36,64,.45);z-index:100000}
.flow-drawer .flow-hd .x{display:block}
.flow-drawer .flow-btn,.flow-drawer .flow-btn.loose{display:inline-flex;position:fixed;left:14px;top:auto;bottom:22px;z-index:9000;box-shadow:0 10px 26px rgba(29,53,87,.22);border-color:var(--navy)}