/* Vastu compass intake. Every colour is an app.css token, so dark mode
   is automatic and there is no #fff or #000 anywhere -- including the
   SVG, which is styled from here by class, the same pattern as .kundli.
   Class names are vi-prefixed so nothing here can collide with app.css. */

.vi-h{font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(28px,8vw,38px);line-height:1.08;letter-spacing:-.015em;
  margin:12px 0 10px;text-wrap:balance}
.vi-lead{font-size:17px;color:var(--body);margin:0 0 10px}
.vi-note{font-size:14px;color:var(--faint);border-left:2px solid var(--line);
  padding-left:12px;margin:12px 0}
.vi-cue{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  margin:14px 0 6px;text-align:center}

.vi-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.vi-chip{padding:10px 14px;min-height:44px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:15px;border-radius:3px}
.vi-chip.on{border-color:var(--deep);background:var(--deep-soft);
  box-shadow:0 0 0 1px var(--deep)}

/* ---- the compass. Whole wedges are the tap targets: at 360px wide each
   wedge is ~90px of arc, well past thumb size, and nothing here needs
   hover to be discovered. */
.vi-compass{display:block;width:100%;height:auto;max-width:360px;
  margin:6px auto 12px;font-family:"IBM Plex Mono",ui-monospace,monospace}
.vi-ring{fill:var(--card);stroke:var(--line);stroke-width:1}
.vi-zone{cursor:pointer}
.vi-zone .vi-wedge{fill:var(--sunk);stroke:var(--line);stroke-width:1}
.vi-zone.armed .vi-wedge{fill:var(--card);stroke:var(--deep)}
.vi-zone.filled .vi-wedge{fill:var(--deep-soft);stroke:var(--deep)}
.vi-zone.centre .vi-wedge{fill:var(--card)}
.vi-zone.centre.filled .vi-wedge{fill:var(--deep-soft)}
.vi-zone:focus-visible{outline:none}
.vi-zone:focus-visible .vi-wedge{stroke:var(--accent);stroke-width:2}
.vi-dir{font-size:12px;letter-spacing:.08em;fill:var(--ink);
  font-weight:600;pointer-events:none}
.vi-room{font-size:9.5px;fill:var(--body);pointer-events:none}
.vi-zone.filled .vi-room{fill:var(--deep)}

.vi-placed{border:1px solid var(--line);border-radius:3px;
  background:var(--card);margin:10px 0}
.vi-row{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 13px;border-bottom:1px solid var(--hair);
  font-size:15px;color:var(--ink);min-height:44px}
.vi-row:last-child{border-bottom:0}
.vi-x{border:1px solid var(--line);background:transparent;color:var(--faint);
  font-size:13px;padding:8px 12px;min-height:40px;border-radius:3px}
.vi-x:active{color:var(--accent);border-color:var(--accent)}

.vi-facing{font-size:14.5px;color:var(--body);margin:12px 0 4px}
.vi-link{border:0;background:none;color:var(--deep);font-size:14.5px;
  text-decoration:underline;padding:6px 4px;min-height:40px}

.vi-label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin:14px 0 6px}
.vi input#viType{width:100%;font-family:inherit;font-size:16px;
  padding:13px 13px;border:1px solid var(--line);border-radius:3px;
  background:var(--sunk);color:var(--ink);margin-bottom:0}
.vi input#viType:focus{background:var(--card);border-color:var(--deep);
  outline:none;box-shadow:0 0 0 3px var(--deep-soft)}

/* hit list: same construction as the birthplace .hits box */
.vi-hits{border:1px solid var(--line);border-radius:3px;margin:6px 0 0;
  background:var(--card);max-height:220px;overflow-y:auto}
.vi-hits button{display:block;width:100%;text-align:left;padding:12px 13px;
  border:0;border-bottom:1px solid var(--hair);background:transparent;
  color:var(--ink);min-height:44px;font-size:15px}
.vi-hits button:last-child{border-bottom:0}

.vi-done{width:100%;padding:15px;font-size:16px;font-weight:600;
  background:var(--deep);color:var(--card);border:1px solid var(--deep);
  min-height:48px;border-radius:3px;margin-top:14px}
.vi-done:disabled{opacity:.38;cursor:not-allowed}

/* ---- THE ICON PICKER (mode "icons", the default).
   Nine real <button>s over a decorative mandala. Every colour is still an
   app.css token, so dark mode arrives with the tokens and there is no
   second copy of anything here; the only dark-specific rules are the two
   at the bottom, which lift artwork that is too faint on a dark ground --
   the same treatment, and the same reason, as closing_panel.css.
   All artwork is inline SVG authored in vastu_input.js; nothing here
   fetches a byte, so there is no url() in this file at all.            */
/* The padding IS the rose: the mandala fills this box, the nine buttons
   fill only the middle of it, and vastu_input.js computes its petal radii
   from the same square. Change one and the other has to move. */
.vi-plan{position:relative;width:100%;max-width:352px;padding:42px;
  margin:6px auto 2px}
.vi-mandala{position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none}
.vi-mline{fill:none;stroke:var(--line);stroke-width:1}
.vi-spoke{fill:none;stroke:var(--hair);stroke-width:1}
.vi-petal{fill:var(--card);stroke:var(--line);stroke-width:1}
.vi-mdot{fill:var(--line)}

.vi-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px}
.vi-cell{position:relative;aspect-ratio:1;min-height:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:5px 3px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink)}
.vi-cell.centre{border-radius:50%}
/* selected/filled is a BORDER WEIGHT plus a drawn tick, never a tint
   alone -- the tint is the third signal, not the only one. */
.vi-cell.filled{border-width:2px;border-color:var(--deep);
  background:var(--deep-soft);color:var(--deep)}
/* the open direction is BRASS, not --accent: accent is this palette's alarm
   colour and an open question is not a warning. The pointer below it says
   "the tray belongs to this cell" without relying on the tint at all. */
.vi-cell.active{border-width:2px;border-color:var(--brass);
  background:var(--warn-soft);color:var(--brass)}
.vi-cell.active::after{content:"";position:absolute;left:50%;bottom:-7px;
  width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);
  background:var(--warn-soft);border-right:2px solid var(--brass);
  border-bottom:2px solid var(--brass)}
.vi-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vi-code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.09em;color:inherit}
.vi-dial{display:block;width:21px;height:21px}
.vi-ring2{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.4}
.vi-tick{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.55;
  stroke-linecap:round}
.vi-icons{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;
  align-items:center;line-height:0}
.vi-plus{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  line-height:1;color:inherit}
.vi-empty{opacity:.34}
.vi-dot{fill:currentColor;stroke:none}

/* the drawings themselves: one stroke rule, every icon */
.vi-ic{display:block;width:19px;height:19px;color:inherit}
.vi-ln{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round}
.vi-fl{fill:currentColor;stroke:none}

/* the tick badge. Drawn, so it survives greyscale and colour blindness. */
.vi-badge{position:absolute;top:3px;right:3px;width:14px;height:14px}
.vi-bdot{fill:var(--deep)}
.vi-btick{fill:none;stroke:var(--card);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}

.vi-tray{border:1px solid var(--line);border-radius:4px;background:var(--sunk);
  padding:11px 10px;margin:12px 0}
.vi-tray-h{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--body);
  margin:0 0 9px}
.vi-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vi-room-b{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:5px;padding:9px 4px;
  min-height:74px;border:1px solid var(--line);border-radius:4px;
  background:var(--card);color:var(--ink);font-size:11.5px;line-height:1.15;
  text-align:center}
.vi-room-b .vi-ic{width:27px;height:27px}
.vi-room-b[aria-pressed="true"]{border-width:2px;border-color:var(--deep);
  background:var(--deep-soft);color:var(--deep);font-weight:600}
.vi-room-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vi-rn{display:block}
.vi-hint{font-size:12.5px;color:var(--faint);margin:9px 0 0}
.vi-zdone{width:100%;margin:9px 0 0;padding:11px;min-height:44px;
  border:1px solid var(--line);border-radius:3px;background:var(--card);
  color:var(--ink);font-size:14.5px}

.vi-rowl{display:flex;align-items:center;gap:9px}
.vi-rowl .vi-ic{width:20px;height:20px;color:var(--deep);flex:none}

.vi-faces{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin:8px 0 4px}
.vi-face-b{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:8px 2px;min-height:60px;
  border:1px solid var(--line);border-radius:4px;background:var(--card);
  color:var(--ink)}
.vi-face-b.wide{grid-column:span 4;flex-direction:row;justify-content:center;
  min-height:44px;font-size:14.5px}
.vi-face-b[aria-pressed="true"]{border-width:2px;border-color:var(--deep);
  background:var(--deep-soft);color:var(--deep)}
.vi-face-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.vi-meter{margin:0 0 10px}
.vi-meter-row{display:flex;justify-content:space-between;gap:8px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;color:var(--body)}
.vi-meter-bar{height:8px;margin:6px 0 4px;background:var(--sunk);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.vi-meter-bar i{display:block;height:100%;width:0;background:var(--deep);
  border-radius:3px}
.vi-meter.full .vi-meter-bar i{background:var(--ok)}
.vi-meter-say{margin:4px 0 0;font-size:13.5px;color:var(--body)}
.vi-done-go{background:var(--ok);border-color:var(--ok)}
.vi-skip{display:block;margin:2px 0 10px}

.vi-split{display:grid;grid-template-columns:minmax(148px,.95fr) minmax(160px,1.05fr);
  gap:8px;align-items:start;margin:8px 0}
.vi-split .vi-plan{max-width:none;width:100%;padding:10px;margin:0}
.vi-split .vi-cell{min-height:54px;padding:3px 2px}
.vi-split .vi-rooms{grid-template-columns:repeat(2,1fr)}
.vi-fams{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.vi-fam{padding:8px 10px;min-height:40px;border:1px solid var(--line);
  border-radius:3px;background:var(--card);color:var(--ink);font-size:13.5px}
.vi-fam[aria-pressed="true"]{border-width:2px;border-color:var(--deep);
  background:var(--deep-soft);color:var(--deep);font-weight:600}
.vi-more{width:100%;margin:7px 0 4px;padding:9px;min-height:40px;
  border:1px dashed var(--line);border-radius:3px;background:transparent;
  color:var(--body);font-size:13.5px}
.vi-type-row{display:flex;gap:6px;align-items:stretch}
.vi-type-row input{flex:1 1 auto;margin:0}
.vi-add{flex:0 0 auto;padding:10px 12px;min-height:44px;border:1px solid var(--deep);
  border-radius:3px;background:var(--deep);color:var(--card);font-size:14px}

/* 390px is the target phone; 340px is the smallest still sold. Two columns
   of rooms there rather than three squeezed ones. */
/* Phones: plan first, items BELOW it. Side-by-side squeezes the tray
   and makes multi-select feel like it missed the tap. */
@media (max-width:720px){
  .vi-split{grid-template-columns:1fr}
  .vi-split .vi-rooms{grid-template-columns:repeat(3,1fr)}
  .vi-split .vi-plan{max-width:352px;margin:0 auto;padding:18px}
  .vi-split .vi-cell{min-height:70px}
}
@media (max-width:359px){
  .vi-split{grid-template-columns:1fr}
  .vi-rooms{grid-template-columns:repeat(2,1fr)}
  .vi-plan{padding:34px}
  .vi-cell{min-height:70px}
}

/* ---- 9-step wizard. One quadrant, items on the right, example below. */
.vi-wiz-prog{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  margin:8px 0 12px}
.vi-wiz-row{display:grid;grid-template-columns:minmax(132px,.85fr) minmax(168px,1.15fr);
  gap:12px;align-items:start}
.vi-wiz-h{font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:clamp(22px,6vw,32px);line-height:1.1;margin:0 0 10px}
.vi-wiz-list{display:flex;flex-direction:column;gap:6px}
.vi-wiz-item,.vi-wiz-none{display:flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);border-radius:3px;text-align:left;
  font-size:15px}
.vi-wiz-item.on,.vi-wiz-none.on{border-color:var(--deep);background:var(--deep-soft);
  box-shadow:0 0 0 1px var(--deep)}
.vi-wiz-item .vi-ic{width:22px;height:22px;flex:0 0 auto}
.vi-grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.vi-mini{min-height:52px;padding:6px 4px;border:1px solid var(--line);
  background:var(--sunk);font-size:11px;line-height:1.25;text-align:center;
  color:var(--ink)}
.vi-mini.on{border-color:var(--deep);background:var(--deep-soft);
  box-shadow:0 0 0 2px var(--deep)}
.vi-mini.filled{border-color:var(--deep)}
.vi-mini.centre{font-weight:600}
.vi-wiz-ex{margin:16px 0 8px;padding:10px 12px;border:1px dashed var(--line);
  background:var(--sunk)}
.vi-wiz-ex p{margin:0 0 8px;font-size:13px;color:var(--body)}
.vi-wiz-need{font-size:14px;color:var(--body);margin:8px 0 0}
.vi-wiz-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0 0}
.vi-wiz-nav button{min-height:44px;min-width:110px}
.vi-wiz-back{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:3px;padding:10px 14px}

/* Dark: the tokens flip themselves, but the faintest artwork -- petals and
   spokes at token weight -- all but disappears, so it gets lifted. Both
   selectors, because the theme arrives either way. */
[data-theme="dark"] .vi-petal{opacity:1;fill:var(--card)}
[data-theme="dark"] .vi-mdot{fill:var(--brass);opacity:.7}
@media (prefers-color-scheme:dark){
  .vi-petal{opacity:1;fill:var(--card)}
  .vi-mdot{fill:var(--brass);opacity:.7}
}