/* ===================================================================
   onboarding.css — ob- namespace
   Nothing here shares a class name with main.css, so the old #setup
   form and this can coexist without either affecting the other.
   =================================================================== */

:root, [data-theme="light"] {
  --ob-bg:#F8F8F6; --ob-surface:#FFFFFF; --ob-surface2:#F0EDE5;
  --ob-ink:#1A1815; --ob-ink2:rgba(26,24,21,.74); --ob-ink3:rgba(26,24,21,.54);
  --ob-line:rgba(26,24,21,.12); --ob-line2:rgba(26,24,21,.22);
  --ob-accent:#8B6A2E;
  --ob-ok:#3B6D33; --ob-okbg:rgba(59,109,51,.10);
  --ob-bad:#8B2D2D; --ob-badbg:rgba(139,45,45,.09);
  --ob-btn:#1A1815; --ob-btntx:#F8F8F6;
}
[data-theme="dark"] {
  --ob-bg:#1C1A17; --ob-surface:#252320; --ob-surface2:#2E2B27;
  --ob-ink:#F4F1E8; --ob-ink2:rgba(244,241,232,.78); --ob-ink3:rgba(244,241,232,.56);
  --ob-line:rgba(244,241,232,.12); --ob-line2:rgba(244,241,232,.22);
  --ob-accent:#C99B4D;
  --ob-ok:#9CBF86; --ob-okbg:rgba(143,173,122,.14);
  --ob-bad:#D08383; --ob-badbg:rgba(199,115,115,.13);
  --ob-btn:#F4F1E8; --ob-btntx:#1C1A17;
}

#onboarding {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ob-ink); font-size:15px; line-height:1.55;
}
#onboarding * { box-sizing:border-box; }
.ob-wrap { max-width:720px; margin:0 auto; }

/* ---------- heading ---------- */
.ob-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.ob-title {
  font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:27px;
  letter-spacing:-.015em; margin:0;
}
.ob-sub { font-size:14.5px; color:var(--ob-ink3); margin:4px 0 0; }
.ob-badge {
  flex-shrink:0; padding:5px 12px; border-radius:999px;
  background:var(--ob-surface2); color:var(--ob-ink2);
  font-size:12.5px; font-weight:500; white-space:nowrap;
}

/* ---------- step strip ---------- */
.ob-steps {
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--ob-line);
}
.ob-stepitem {
  display:flex; align-items:center; gap:8px;
  padding:6px 13px 6px 7px; border-radius:999px;
  font-size:13.5px; color:var(--ob-ink3);
}
.ob-stepitem.on { background:var(--ob-btn); color:var(--ob-btntx); font-weight:500; }
.ob-stepitem.done { color:var(--ob-ink2); }
.ob-stepn {
  width:21px; height:21px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:11.5px; font-weight:600;
  background:var(--ob-surface2); color:var(--ob-ink3);
}
.ob-stepitem.on .ob-stepn { background:rgba(255,255,255,.2); color:var(--ob-btntx); }
[data-theme="dark"] .ob-stepitem.on .ob-stepn { background:rgba(0,0,0,.2); }
.ob-stepitem.done .ob-stepn { background:var(--ob-okbg); color:var(--ob-ok); }

/* ---------- card ---------- */
.ob-card {
  background:var(--ob-surface); border:1px solid var(--ob-line);
  border-radius:12px; padding:28px 30px;
}
.ob-h2 {
  font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:21px;
  letter-spacing:-.01em; margin:0 0 6px;
}
.ob-note { font-size:14px; color:var(--ob-ink3); margin:0 0 22px; line-height:1.6; }
.ob-center { text-align:center; }

.ob-error {
  padding:12px 16px; border-radius:8px; margin-bottom:16px;
  background:var(--ob-badbg); color:var(--ob-bad); font-size:14px; line-height:1.5;
}

/* ---------- fields ---------- */
.ob-field { margin-bottom:22px; }
.ob-field:last-of-type { margin-bottom:0; }
.ob-label {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13.5px; font-weight:600; margin-bottom:8px;
}
.ob-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ob-hint { font-size:12.5px; color:var(--ob-ink3); margin-top:7px; line-height:1.5; }

.ob-input, .ob-area {
  width:100%; padding:11px 14px; border-radius:8px;
  background:var(--ob-bg); color:var(--ob-ink);
  border:1px solid var(--ob-line2);
  font-family:inherit; font-size:15px; line-height:1.55;
}
.ob-area { min-height:96px; resize:vertical; }
.ob-input:focus, .ob-area:focus { outline:2px solid var(--ob-ink); outline-offset:-2px; }
.ob-input::placeholder, .ob-area::placeholder { color:var(--ob-ink3); }
select.ob-input { cursor:pointer; }

.ob-tag {
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
  background:var(--ob-surface2); color:var(--ob-ink3);
  letter-spacing:.02em; text-transform:none;
}
.ob-tag-src { font-weight:500; }
.ob-tag-ok { background:var(--ob-okbg); color:var(--ob-ok); }

.ob-or {
  display:flex; align-items:center; gap:14px;
  margin:22px 0; color:var(--ob-ink3); font-size:12.5px;
}
.ob-or::before, .ob-or::after {
  content:''; flex:1; height:1px; background:var(--ob-line);
}

/* ---------- step 2 extras ---------- */
.ob-pillars { margin:0; padding-left:20px; }
.ob-pillars li { font-size:14px; color:var(--ob-ink2); padding:4px 0; line-height:1.5; }

.ob-imgs {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:9px;
}
.ob-img {
  aspect-ratio:1; border-radius:8px; overflow:hidden;
  border:1px solid var(--ob-line); background:var(--ob-surface2);
}
.ob-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- the wait ---------- */
.ob-waiting { text-align:center; padding:36px 30px 32px; }
.ob-hamster { display:flex; justify-content:center; margin-bottom:20px; }
.ob-wheel-svg { width:170px; height:170px; }

.ob-wheel { transform-origin:100px 100px; animation:ob-spin 2.4s linear infinite; }
@keyframes ob-spin { to { transform:rotate(360deg); } }

/* he bobs, he does not travel — that is the tragedy of the wheel */
.ob-hammy { transform-origin:100px 150px; animation:ob-bob .42s ease-in-out infinite alternate; }
@keyframes ob-bob {
  from { transform:translateY(0) rotate(-1.5deg); }
  to   { transform:translateY(-4px) rotate(1.5deg); }
}
.ob-legs { animation:ob-scurry .21s linear infinite alternate; transform-origin:100px 167px; }
@keyframes ob-scurry {
  from { transform:translateX(-3px); }
  to   { transform:translateX(3px); }
}

.ob-stages {
  display:inline-flex; flex-direction:column; gap:9px;
  margin-top:24px; text-align:left;
}
.ob-stage {
  display:flex; align-items:center; gap:11px;
  font-size:13.5px; color:var(--ob-ink3);
}
.ob-stage.now { color:var(--ob-ink); font-weight:500; }
.ob-stage.done { color:var(--ob-ink2); }
.ob-stagedot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--ob-line2);
}
.ob-stage.done .ob-stagedot { background:var(--ob-ok); }
.ob-stage.now .ob-stagedot {
  background:var(--ob-accent); animation:ob-pulse 1.1s ease-in-out infinite;
}
@keyframes ob-pulse { 50% { opacity:.35; transform:scale(.8); } }
.ob-slow { margin-top:20px; font-size:13px; }

/* ---------- step 3 ---------- */
.ob-conncount {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;
}
.ob-channels {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px;
}
.ob-channel {
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:14px 16px; border-radius:10px; cursor:pointer; text-align:left;
  background:var(--ob-bg); border:1px solid var(--ob-line2);
  font-family:inherit; color:var(--ob-ink);
}
.ob-channel:hover { border-color:var(--ob-ink); }
.ob-channel.on { background:var(--ob-okbg); border-color:transparent; cursor:default; }
.ob-chname { font-size:14.5px; font-weight:600; }
.ob-chstate { font-size:12.5px; color:var(--ob-ink3); }
.ob-channel.on .ob-chstate { color:var(--ob-ok); }

/* ---------- step 4 ---------- */
.ob-modes { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ob-mode {
  display:flex; flex-direction:column; gap:5px; padding:15px 17px;
  border-radius:10px; cursor:pointer; text-align:left;
  background:var(--ob-bg); border:1px solid var(--ob-line2);
  font-family:inherit; color:var(--ob-ink);
}
.ob-mode:hover { border-color:var(--ob-ink); }
.ob-mode.on { border-color:var(--ob-ink); background:var(--ob-surface2); }
.ob-modename { font-size:14.5px; font-weight:600; }
.ob-modenote { font-size:12.5px; color:var(--ob-ink3); line-height:1.5; }

.ob-summary {
  display:flex; gap:7px; flex-wrap:wrap;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--ob-line);
}
.ob-pill {
  padding:4px 11px; border-radius:999px; font-size:12.5px;
  background:var(--ob-surface2); color:var(--ob-ink2);
}

/* ---------- footer ---------- */
.ob-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--ob-line);
}
.ob-footnote { font-size:12.5px; color:var(--ob-ink3); }
.ob-foot .ob-btn-p { margin-left:auto; }

.ob-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:8px; cursor:pointer; white-space:nowrap;
  font-family:inherit; font-size:14.5px; font-weight:500; line-height:1;
  border:1px solid transparent;
}
.ob-btn-p { background:var(--ob-btn); color:var(--ob-btntx); }
.ob-btn-p:hover { opacity:.88; }
.ob-btn-p:disabled { opacity:.4; cursor:default; }
.ob-btn-q { background:transparent; color:var(--ob-ink2); border-color:var(--ob-line2); }
.ob-btn-q:hover { background:var(--ob-surface2); color:var(--ob-ink); }

@media (max-width:640px) {
  .ob-card { padding:20px 18px; }
  .ob-row, .ob-modes { grid-template-columns:1fr; }
  .ob-title { font-size:23px; }
  .ob-steplabel { display:none; }
  .ob-stepitem { padding:6px; }
  .ob-foot { flex-direction:column; align-items:stretch; }
  .ob-foot .ob-btn { width:100%; margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-wheel, .ob-hammy, .ob-legs, .ob-stage.now .ob-stagedot { animation:none; }
}

/* ===================================================================
   Colours as circles, pictures with a remove control, clearer channels
   =================================================================== */

.ob-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.ob-swatch { position:relative; display:inline-block; }
.ob-dot {
  display:block; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--ob-line2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.ob-x {
  width:18px; height:18px; border-radius:50%; cursor:pointer;
  border:none; background:var(--ob-ink); color:var(--ob-bg);
  font-family:inherit; font-size:12px; line-height:1;
  display:grid; place-items:center; padding:0;
  position:absolute; top:-4px; right:-4px;
  opacity:0; transition:opacity .12s ease;
}
.ob-swatch:hover .ob-x, .ob-img:hover .ob-x { opacity:1; }
.ob-x-float { top:5px; right:5px; background:rgba(26,24,21,.8); color:#fff; }

.ob-add { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
#obNewColour {
  width:38px; height:38px; padding:2px; cursor:pointer;
  border:1px solid var(--ob-line2); border-radius:50%; background:var(--ob-bg);
}
.ob-input-hex {
  width:104px; font-family:ui-monospace,Menlo,monospace; font-size:13px;
  padding:9px 11px;
}
.ob-btn-sm { padding:9px 14px; font-size:13.5px; }
.ob-empty { font-size:13.5px; color:var(--ob-ink3); font-style:italic; margin:0; }

.ob-img { position:relative; margin:0; }

/* channels: connected should be unmistakable */
.ob-channel {
  flex-direction:row; align-items:center; gap:12px;
}
.ob-chmark {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:14px; font-weight:600;
  background:var(--ob-surface2); color:var(--ob-ink3);
}
.ob-channel.on .ob-chmark { background:var(--ob-ok); color:#fff; }
.ob-chtext { display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.ob-channel.on {
  background:var(--ob-okbg); border-color:var(--ob-ok); cursor:default;
}
.ob-channel:disabled { opacity:1; }

/* ---------- logos and pictures, kept apart ---------- */
.ob-assets { display:flex; gap:12px; flex-wrap:wrap; }
.ob-asset {
  position:relative; margin:0; width:104px;
}
.ob-asset > img {
  width:104px; height:72px; object-fit:contain; padding:7px;
  border-radius:9px; border:1px solid var(--ob-line);
  background:var(--ob-surface2); display:block;
}
.ob-asset figcaption {
  font-size:10.5px; color:var(--ob-ink3); text-align:center; margin-top:4px;
}

.ob-imgs .ob-asset { width:auto; }
.ob-imgs .ob-asset > img {
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; padding:0;
}

.ob-asset:hover .ob-x { opacity:1; }

/* a rule between the brand assets and the written details */
.ob-sep {
  height:1px; background:var(--ob-line); margin:28px 0 24px;
}

/* ---------- naming panel for uploaded photos ---------- */
.ob-scrim {
  position:fixed; inset:0; z-index:1000;
  background:rgba(26,24,21,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto;
}
[data-theme="dark"] .ob-scrim { background:rgba(10,9,8,.7); }
.ob-panel {
  width:100%; max-width:620px; background:var(--ob-bg); color:var(--ob-ink);
  border:1px solid var(--ob-line2); border-radius:12px; overflow:hidden;
  font-family:'Inter', system-ui, sans-serif;
}
.ob-panel-head {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--ob-line); background:var(--ob-surface);
}
.ob-panel-title { font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:19px; }
.ob-panel-sub { font-size:13px; color:var(--ob-ink3); margin-top:2px; }
.ob-close {
  width:34px; height:34px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--ob-line2);
  color:var(--ob-ink2); font-size:20px; line-height:1; font-family:inherit;
}
.ob-close:hover { background:var(--ob-surface2); }
.ob-panel-body { padding:24px; }
.ob-panel-foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 24px; border-top:1px solid var(--ob-line); background:var(--ob-surface);
}
.ob-foot-btns { display:flex; gap:8px; }

.ob-up {
  display:grid; grid-template-columns:88px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--ob-line);
}
.ob-up:first-of-type { border-top:none; padding-top:8px; }
.ob-up-thumb {
  width:88px; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:8px; border:1px solid var(--ob-line);
}
.ob-up-fields { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ob-up-desc { min-height:74px; font-size:14px; }

@media (max-width:640px) {
  .ob-up { grid-template-columns:64px 1fr; gap:12px; }
  .ob-up-thumb { width:64px; }
  .ob-panel-foot { flex-direction:column; align-items:stretch; }
  .ob-foot-btns .ob-btn { flex:1; }
}


/* main.js already writes "(Connected)" and the account name into the
   label — a second badge just repeats it */
.ob-channelhost .platform-button.active::after { content:none; }

/* the gold is doing too much on a filled button — a left bar reads
   as a state, a full wash reads as a warning */
.ob-channelhost .platform-button.active {
  background:var(--ob-surface2) !important;
  border-color:var(--ob-line) !important;
  border-left:3px solid var(--ob-accent) !important;
  color:var(--ob-ink) !important;
}
.ob-channelhost .platform-button.active i,
.ob-channelhost .platform-button.active svg {
  color:var(--ob-accent) !important;
}

/* keep the labels on one line so the grid stays even */
.ob-channelhost .platform-button {
  min-height:60px;
  line-height:1.35;
}



.ob-stepitem.done .ob-stepn {
  background:color-mix(in srgb, var(--ob-accent) 14%, transparent);
  color:var(--ob-accent);
}
.ob-tag-ok {
  background:color-mix(in srgb, var(--ob-accent) 12%, transparent);
  color:var(--ob-accent);
}


/* ===================================================================
   main.js's confirm dialog. It's inserted into <body>, so this can't be
   scoped to onboarding — it restyles the dialog everywhere, including
   the old setup form. That's fine; nothing else uses these classes.
   =================================================================== */

.modal-overlay {
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(26,24,21,.55) !important;
  backdrop-filter:none !important;
}
[data-theme="dark"] .modal-overlay { background:rgba(10,9,8,.7) !important; }

.modal-content {
  width:100%; max-width:420px;
  background:var(--ob-bg) !important;
  border:1px solid var(--ob-line2) !important;
  border-radius:12px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.18) !important;
  color:var(--ob-ink) !important;
  font-family:'Inter', system-ui, sans-serif !important;
  overflow:hidden;
}

.modal-header {
  padding:20px 24px 0 !important;
  background:none !important; border:none !important;
}
.modal-title {
  font-family:'Newsreader', Georgia, serif !important;
  font-weight:500 !important; font-size:20px !important;
  letter-spacing:-.01em !important; margin:0 !important;
  color:var(--ob-ink) !important;
  text-shadow:none !important; text-transform:none !important;
}

.modal-body { padding:10px 24px 20px !important; background:none !important; }
.modal-text {
  margin:0 !important; font-size:14.5px !important; line-height:1.6 !important;
  color:var(--ob-ink3) !important;
}

.modal-footer {
  display:flex !important; justify-content:flex-end !important; gap:8px !important;
  padding:16px 24px !important;
  background:var(--ob-surface) !important;
  border-top:1px solid var(--ob-line) !important;
}

.modal-footer .cancel-button,
.modal-footer .save-button {
  padding:10px 18px !important; border-radius:8px !important; cursor:pointer;
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:14px !important; font-weight:500 !important;
  letter-spacing:normal !important; text-transform:none !important;
  border:1px solid transparent !important;
  box-shadow:none !important; text-shadow:none !important;
}
.modal-footer .cancel-button {
  background:transparent !important;
  border-color:var(--ob-line2) !important;
  color:var(--ob-ink2) !important;
}
.modal-footer .cancel-button:hover {
  background:var(--ob-surface2) !important; color:var(--ob-ink) !important;
}

/* the confirm here is destructive, so it reads as such */
.modal-footer .save-button {
  background:var(--ob-bad) !important; color:#fff !important;
}
.modal-footer .save-button:hover { opacity:.9 !important; }

/* main.css glows these; the shadow is what's showing through as cyan */
.ob-channelhost .platform-button,
.ob-channelhost .platform-button:hover,
.ob-channelhost .platform-button:focus,
.ob-channelhost .platform-button.active {
  box-shadow:none !important;
  outline:none !important;
}



/* main.css colours the unconnected state for a dark theme — text and
   icon end up near-white on our light background, so the button looks
   empty. Force both regardless of state. */
.ob-channelhost .platform-button,
.ob-channelhost .platform-button:not(.active) {
  color:var(--ob-ink) !important;
  -webkit-text-fill-color:var(--ob-ink) !important;
  border-color:var(--ob-line2) !important;
  background:var(--ob-bg) !important;
}
.ob-channelhost .platform-button:not(.active) i,
.ob-channelhost .platform-button:not(.active) svg {
  color:var(--ob-ink3) !important;
  stroke:var(--ob-ink3) !important;
  opacity:1 !important;
}



/* the real date input exists only to own the picker */
.ob-hiddendate {
  position:absolute; width:0; height:0; padding:0; margin:0;
  border:0; opacity:0; pointer-events:none;
}




/* ===================================================================
   Our own date and time controls.

   The native ones render a picker the browser owns — OS accent colour,
   its own positioning, and an overlay that swallows clicks across the
   whole card. None of it reachable from CSS. These are plain elements.
   =================================================================== */

/* the button that opens the calendar reads as a field */
.ob-datewrap { position:relative; }
.ob-datebtn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; cursor:pointer; text-align:left;
  font-family:inherit; font-size:15px; color:var(--ob-ink);
}
.ob-datebtn::after {
  content:''; flex-shrink:0; margin-left:12px;
  width:9px; height:9px; border-right:1.6px solid var(--ob-ink3);
  border-bottom:1.6px solid var(--ob-ink3);
  transform:rotate(45deg) translateY(-2px);
}
.ob-datebtn:hover { border-color:var(--ob-ink) !important; }

.ob-cal {
  position:absolute; z-index:60; top:calc(100% + 6px); left:0;
  width:290px; padding:14px;
  background:var(--ob-surface); color:var(--ob-ink);
  border:1px solid var(--ob-line2); border-radius:11px;
  box-shadow:0 10px 32px rgba(0,0,0,.13);
}
[data-theme="dark"] .ob-cal { box-shadow:0 10px 32px rgba(0,0,0,.45); }
.ob-cal[hidden] { display:none; }

.ob-calhead {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.ob-calmonth { font-size:14px; font-weight:600; }
.ob-calnav {
  width:28px; height:28px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--ob-line2);
  color:var(--ob-ink2); font-family:inherit; font-size:15px; line-height:1;
}
.ob-calnav:hover { background:var(--ob-surface2); color:var(--ob-ink); }

.ob-calgrid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.ob-caldow {
  margin-bottom:4px; font-size:11px; font-weight:600;
  color:var(--ob-ink3); text-align:center;
}
.ob-caldow span { padding:4px 0; }

.ob-calday {
  aspect-ratio:1; border:none; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--ob-ink);
  font-family:inherit; font-size:13px;
}
.ob-calday:hover:not(.off) { background:var(--ob-surface2); }
.ob-calday.on {
  background:var(--ob-ink) !important; color:var(--ob-bg) !important;
  font-weight:600;
}
.ob-calday.off { color:var(--ob-ink3); opacity:.35; cursor:default; }
.ob-calpad { aspect-ratio:1; }

/* the time dropdown is an ordinary select, so it just needs room */
#obTime { cursor:pointer; }

/* the hidden inputs behind the old approach are no longer used */
.ob-hiddendate { display:none !important; }

@media (max-width:640px) {
  .ob-cal { width:min(290px, calc(100vw - 48px)); }
}





/* ---- our own frequency and time panels ---- */
.ob-pop { position:relative; }
.ob-popbtn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; cursor:pointer; text-align:left;
  font-family:inherit; font-size:15px; color:var(--ob-ink);
}
.ob-popbtn::after {
  content:''; flex-shrink:0; margin-left:12px; width:8px; height:8px;
  border-right:1.6px solid var(--ob-ink3); border-bottom:1.6px solid var(--ob-ink3);
  transform:rotate(45deg) translateY(-2px);
}
.ob-popbtn:hover { border-color:var(--ob-ink) !important; }

.ob-poppanel {
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; min-width:100%;
  padding:6px; background:var(--ob-surface); color:var(--ob-ink);
  border:1px solid var(--ob-line2); border-radius:11px;
  box-shadow:0 10px 32px rgba(0,0,0,.13);
}
[data-theme="dark"] .ob-poppanel { box-shadow:0 10px 32px rgba(0,0,0,.45); }
.ob-poppanel[hidden] { display:none; }

.ob-popopt {
  display:block; width:100%; padding:9px 12px; border:none; border-radius:7px;
  background:transparent; cursor:pointer; text-align:left;
  font-family:inherit; font-size:14.5px; color:var(--ob-ink);
}
.ob-popopt:hover { background:var(--ob-surface2); }
.ob-popopt.on { background:var(--ob-ink); color:var(--ob-bg); font-weight:500; }

.ob-timepanel { padding:8px; }
.ob-timecols { display:flex; gap:6px; }
.ob-timecol {
  flex:1; max-height:216px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px; scrollbar-width:thin;
}
.ob-timecol::-webkit-scrollbar { width:5px; }
.ob-timecol::-webkit-scrollbar-thumb { background:var(--ob-line2); border-radius:3px; }
.ob-ampm { flex:0 0 54px; max-height:none; }
.ob-timeopt {
  padding:8px 6px; border:none; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--ob-ink);
  font-family:ui-monospace, Menlo, monospace; font-size:14px; text-align:center;
}
.ob-timeopt:hover { background:var(--ob-surface2); }
.ob-timeopt.on { background:var(--ob-ink); color:var(--ob-bg); font-weight:600; }
.ob-ampm .ob-timeopt { font-family:inherit; font-size:13px; }

/* the calendar now shares the panel shell */
.ob-cal { width:290px; padding:14px; }
.ob-datewrap { position:relative; }

/* panels in the right column open leftwards so they stay on screen */
.ob-row .ob-field:last-child .ob-poppanel { left:auto; right:0; }

@media (max-width:640px) {
  .ob-cal { width:min(290px, calc(100vw - 48px)); }
  .ob-timecol { max-height:180px; }
}