/* =====================================================================
   FREQUENCY MATRIX — HASHBOARD APP LAYER
   Load after fm.css. All visual values derive from the canonical tokens.
   ===================================================================== */

.hb-app{
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  background:var(--night);
  color:var(--night-ink);
}

.hb-app a{color:inherit}

.hb-skiplink{
  position:fixed;
  top:var(--s1);
  left:var(--s1);
  z-index:40;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.hb-skiplink:focus{
  width:auto;
  height:auto;
  padding:var(--s1) var(--s2);
  overflow:visible;
  clip-path:none;
  border:1px solid var(--gold-vivid);
  background:var(--night);
  color:var(--night-ink);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hb-appbar{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--night-line);
  background:color-mix(in srgb,var(--night) 88%,transparent);
  -webkit-backdrop-filter:blur(var(--s1));
  backdrop-filter:blur(var(--s1));
}

/* Una barra da Web App: altezza fissa e prevedibile, non una fascia che
   cresce con il contenuto. 64 px piu' la safe-area di iOS. */
.hb-appbar__inner{
  width:min(100%,var(--maxw));
  margin-inline:auto;
  padding-inline:clamp(var(--s3),6vw,var(--s5));
  padding-block:0;
  min-height:64px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s3);
}
.hb-appbar{padding-top:env(safe-area-inset-top,0px)}

.hb-brand,
.hb-account,
.hb-logout{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hb-brand{letter-spacing:.22em}
.hb-brand .bn{color:var(--gold-vivid)}
.hb-brand .bs{color:var(--cobalt)}
/* Il controllo account: un segno con le iniziali e il nome accanto. Il nome
   non viene tagliato — se non ci sta, a non entrare e' il nome intero, e
   allora resta il segno, che e' un dato e non un troncamento. */
.hb-account{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  color:var(--night-muted);
  cursor:pointer;
}
.hb-account__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border:1px solid var(--night-line);
  border-radius:50%;
  color:var(--gold-vivid);
  font-size:.6rem;
  letter-spacing:.04em;
}
/* Nessun troncamento: era esattamente il difetto — "THE FREQ" non e' un nome.
   La colonna e' auto, il nome la dimensiona; se davvero non ci sta, sotto i
   900 px sparisce del tutto e resta il segno con le iniziali. */
.hb-account__name{white-space:nowrap;letter-spacing:.1em}
.hb-account:hover,
.hb-account[aria-expanded="true"]{color:var(--night-ink)}
.hb-account[aria-expanded="true"] .hb-account__mark{border-color:var(--gold-vivid)}
.hb-session{min-width:0;display:flex;align-items:center;gap:var(--s2);justify-self:end}

/* Il pannello account. Su desktop e' una tendina ancorata a destra; su mobile
   e' un foglio a tutta larghezza sotto la barra, e contiene anche le quattro
   funzioni. */
.hb-panel{
  position:absolute;
  right:clamp(var(--s3),6vw,var(--s5));
  z-index:30;
  min-width:min(280px,calc(100vw - var(--s4)));
  padding:var(--s3);
  border:1px solid var(--night-line);
  background:var(--night);
  box-shadow:0 18px 48px rgb(0 0 0 / 45%);
}
.hb-panel[hidden]{display:none}
.hb-panel__head{padding-bottom:var(--s2);border-bottom:1px solid var(--night-line)}
.hb-panel__name{margin:0;color:var(--night-ink);font-size:.95rem;line-height:1.3}
.hb-panel__plan{
  margin:6px 0 0;
  color:var(--gold-vivid);
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hb-panel__links{display:flex;flex-direction:column;padding-top:var(--s2)}
.hb-panel__link{
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--night-ink);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hb-panel__link--quiet{color:var(--night-muted)}
.hb-panel__link:hover,.hb-panel__link:focus-visible{color:var(--gold-vivid)}
.hb-panel__link--primary{color:var(--gold-vivid)}

.hb-nav{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s3);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hb-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:var(--s1);
  color:var(--night-muted);
  white-space:nowrap;
}

.hb-nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:linear-gradient(90deg,var(--gold-vivid),var(--cobalt));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}

.hb-nav a:hover,
.hb-nav a[aria-current="page"]{color:var(--gold-vivid)}
.hb-nav a:hover::after,
.hb-nav a[aria-current="page"]::after{transform:scaleX(1)}
/* La pagina attiva non si riconosce dal solo colore: la sottolineatura e il
   peso restano leggibili anche a chi il colore non lo distingue. */
.hb-nav a[aria-current="page"]{font-weight:700}

.hb-main{
  width:min(100%,calc(var(--maxw) - var(--s6) - var(--s2)));
  margin-inline:auto;
  padding-inline:clamp(var(--s3),6vw,var(--s5));
  padding-bottom:var(--s6);
}

.hb-view{
  min-width:0;
  padding-block:clamp(var(--s4),6vh,var(--s5));
}

.hb-viewhead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s4);
}

.hb-viewhead h1,
.hb-viewhead h2{
  margin:0;
  max-width:none;
  color:var(--night-ink);
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1;
  letter-spacing:-.04em;
}

.hb-viewhead p{
  max-width:52ch;
  margin:var(--s2) 0 0;
  color:var(--night-muted);
}

.hb-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:var(--s3);
}

.hb-card{
  min-width:0;
  padding:var(--s3);
  border:1px solid var(--night-line);
  background:color-mix(in srgb,var(--night-ink) 4%,var(--night));
}

.hb-card > :first-child{margin-top:0}
.hb-card > :last-child{margin-bottom:0}

.hb-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s3);
  padding:var(--s2) 0;
  border-bottom:1px solid var(--night-line);
}

.hb-row:first-child{border-top:1px solid var(--night-line)}
.hb-row > *{min-width:0}
.hb-row--interactive{cursor:pointer}
.hb-row--interactive:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.hb-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s1) var(--s2);
  color:var(--night-muted);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.08em;
}

.hb-row__action{justify-self:end}

.hb-areas{margin-block:var(--s3)}
.hb-areas > .k{display:block;margin-bottom:var(--s1)}
.hb-area-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s1);
}
.hb-area-link{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:.55rem var(--s2);
  border:1px solid var(--night-line);
  border-radius:var(--s3);
  color:var(--night-muted);
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.25;
  text-decoration:none;
}
.hb-area-link strong{font:inherit}
.hb-area-link span{margin-left:.45rem;color:inherit;font-size:inherit}
.hb-area-link:hover,
.hb-area-link--current{
  border-color:var(--gold);
  color:var(--gold);
}
.hb-area-link:focus-visible,
.hb-player-controls button:focus-visible,
.hb-player-progress:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.hb-player-controls{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hb-player-controls button[hidden]{display:none}
.hb-player-progress{width:100%;margin-top:var(--s2);accent-color:var(--cyan)}
.hb-player-time{
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-top:var(--s1);
  color:var(--night-muted);
  font-family:var(--mono);
}
.hb-add-playlist{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1);width:100%;max-width:38rem}
.hb-add-playlist[hidden]{display:none}
.hb-add-playlist select{min-width:0;border:1px solid var(--night-line);background:var(--night);padding:var(--s1);color:var(--night-ink)}
.hb-add-playlist .hb-player-status{grid-column:1 / -1;margin:0}
.hb-add-playlist__create{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1)}
.hb-add-playlist__create[hidden]{display:none}
.hb-add-playlist__create input{min-width:0}
.hb-player-status{min-height:1.5em;margin-top:var(--s1);color:var(--night-muted)}

.hb-library{
  display:flex;
  flex-direction:column;
}
.hb-library.is-searching .progsearch{order:0}
.hb-library.is-searching #biblioResults{order:1}
.hb-library.is-searching .hb-areas{order:2}
.hb-library.is-searching .hb-filter{order:3}

.hb-section{
  padding-block:var(--s3);
}

.hb-section + .hb-section{
  margin-top:var(--s2);
}

.hb-threshold{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--s4);
  padding:var(--s4);
  border:1px solid var(--night-line);
  background:linear-gradient(135deg,var(--glow-n),transparent 48%,var(--glow-s));
}
.hb-threshold[hidden],
#authenticated-home[hidden]{display:none}
.hb-threshold h2{margin:var(--s1) 0 var(--s2);font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.08}
.hb-threshold p{max-width:58ch;margin:0;color:var(--night-muted)}
.hb-threshold__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2)}
.hb-threshold__site{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted)}
.hb-threshold__site:hover{color:var(--gold-vivid)}

.hb-sectionhead > div{min-width:0}
.hb-sectionhead h2{
  margin:var(--s1) 0 0;
  color:var(--night-ink);
  font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.1;
}

.hb-definition-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2);
  margin:0;
}

.hb-definition-grid > dl{
  min-width:0;
  margin:0;
  padding:var(--s3);
  border:1px solid var(--night-line);
  background:color-mix(in srgb,var(--night-ink) 3%,var(--night));
}

.hb-definition-grid dt{
  color:var(--night-muted);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hb-definition-grid dd{
  margin:var(--s1) 0 0;
  overflow-wrap:anywhere;
  color:var(--night-ink);
  font-size:clamp(1rem,2vw,1.25rem);
}

.hb-entitlement-list{
  list-style:none;
  margin:0;
  padding:0;
}
.hb-entitlement-copy{display:grid;gap:var(--s1)}
.hb-entitlement-copy strong{color:var(--night-ink)}
.hb-entitlement-copy p{
  margin:0;
  color:var(--night-muted);
  font-size:.9rem;
}
.hb-purchase-list{margin:var(--s1) 0 0;padding-left:1.1rem;color:var(--night-muted)}
.hb-purchase-list li+li{margin-top:calc(var(--s1) / 2)}

.hb-filter{
  margin-block:var(--s3);
}

.hb-chips{
  display:flex;
  flex-wrap:wrap;
  min-width:0;
  gap:var(--s1);
  padding-bottom:var(--s1);
  overflow-x:visible;
}

.hb-chip{
  flex:0 0 auto;
  padding:var(--s1) var(--s2);
  border:1px solid var(--night-line);
  border-radius:var(--s3);
  background:transparent;
  color:var(--night-muted);
  cursor:pointer;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.08em;
  white-space:nowrap;
}

.hb-chip:hover,
.hb-chip[aria-pressed="true"]{
  border-color:var(--gold-vivid);
  color:var(--gold-vivid);
}

.hb-app .progsearch input,
.hb-app .progsearch button{color:var(--night-ink)}
.hb-app .progsearch input{min-width:0}

.hb-result-title{
  margin:var(--s1) 0 0;
  font-size:clamp(1.1rem,2.2vw,1.4rem);
}

.hb-result-copy{
  margin:var(--s1) 0 0;
  color:var(--night-muted);
}

.hb-detail[hidden],
.hb-library[hidden]{display:none}

.hb-detail{padding:0}

.hb-back{
  margin-bottom:var(--s3);
  padding-inline:0;
  border:0;
}

.hb-detail__meta{
  margin-bottom:var(--s3);
}

.hb-playarea{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s2);
  margin-top:var(--s4);
}

.hb-playarea .hb-state{width:100%}

.hb-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:calc(var(--s1) / 2) var(--s1);
  border:1px solid var(--night-line);
  border-radius:var(--s3);
  color:var(--night-muted);
  font-family:var(--mono);
  font-size:.6rem;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hb-badge--active{
  border-color:var(--gold-vivid);
  color:var(--gold-vivid);
  background:color-mix(in srgb,var(--cobalt) 14%,transparent);
}

.hb-badge--locked{
  border-color:var(--night-line);
  color:var(--night-muted);
}

.hb-badge--grace{
  border-color:var(--gold);
  color:var(--gold-vivid);
  background:color-mix(in srgb,var(--gold) 10%,transparent);
}

.hb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:var(--s2) var(--s3);
  border:1px solid var(--night-line);
  background:transparent;
  color:var(--night-ink);
  cursor:pointer;
  font-family:var(--mono);
  font-size:.7rem;
  line-height:1.3;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
  transition:border-color .35s,color .35s,background-color .35s;
}

.hb-btn:hover{
  border-color:var(--gold-vivid);
  color:var(--gold-vivid);
}

.hb-btn--primary{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--btn-ink);
}

.hb-btn--primary:hover{
  background:transparent;
  color:var(--gold-vivid);
}

.hb-btn[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}

.hb-state{
  position:relative;
  min-width:0;
  padding:var(--s3);
  border:1px solid var(--night-line);
  color:var(--night-muted);
  background:color-mix(in srgb,var(--night-ink) 3%,var(--night));
}

.hb-state p{margin:0}
.hb-state__actions{margin-top:var(--s3)}

.hb-state--loading{
  overflow:hidden;
  min-height:var(--s5);
}

.hb-state--loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--night-ink) 9%,transparent),transparent);
  transform:translateX(-100%);
  animation:hb-shimmer 1.6s ease-in-out infinite;
}

@keyframes hb-shimmer{
  to{transform:translateX(100%)}
}

.hb-state--empty{border-style:dashed}

.hb-state--unavailable{
  border-style:dashed;
  color:var(--night-muted);
}

.hb-state--locked{
  border-left:2px solid var(--gold-vivid);
  background:linear-gradient(110deg,color-mix(in srgb,var(--gold) 9%,var(--night)),color-mix(in srgb,var(--cobalt) 7%,var(--night)));
  color:var(--night-ink);
}

.hb-state--locked::before{
  content:"◇";
  display:block;
  margin-bottom:var(--s1);
  color:var(--gold-vivid);
  font-family:var(--mono);
}

.hb-state--error{
  border-left:2px solid color-mix(in srgb,var(--gold) 72%,var(--cobalt));
  color:color-mix(in srgb,var(--gold-vivid) 78%,var(--night-ink));
  background:color-mix(in srgb,var(--gold) 7%,var(--night));
}

/* Playlist / technical sequences */
.hb-sectionhead,
.hb-player__status,
.hb-player__seek{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
}

.hb-sectionhead{margin-bottom:var(--s3)}
.hb-sectionhead h2{margin:0}
.hb-btn--quiet{padding:var(--s1) var(--s2)}

.hb-sequences[data-view="list"] #hb-detail,
.hb-sequences[data-view="detail"] #hb-list{display:none}

.hb-seq{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s2) var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--night-line);
}

.hb-seq:first-child{border-top:1px solid var(--night-line)}
.hb-seq--interactive{cursor:pointer;transition:background-color .2s ease}
.hb-seq--interactive:hover{background:color-mix(in srgb,var(--night-ink) 3%,transparent)}
.hb-seq--interactive:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.hb-seq-main{min-width:0}
.hb-seq h3{margin:0 0 var(--s1);font-size:clamp(1.05rem,2vw,1.3rem)}
.hb-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);color:var(--night-muted);font-family:var(--mono);font-size:.64rem}
.hb-action{grid-column:2;grid-row:1;align-self:center;padding:var(--s2) var(--s3);border:1px solid var(--gold);background:transparent;color:var(--night-ink);cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.hb-action:hover,.hb-action:focus-visible{border-color:var(--gold-vivid);color:var(--gold-vivid)}
.hb-seq-progress{grid-column:1 / -1;width:100%;height:calc(var(--s1) / 2);border:0;accent-color:var(--gold-vivid)}

.hb-sequence-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:var(--s4)}
.hb-sequence-detail h2{margin:var(--s1) 0 var(--s3)}
.hb-itemlist{margin:0;padding:0;list-style:none}
.hb-item{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--night-line);color:var(--night-muted)}
.hb-item:first-child{border-top:1px solid var(--night-line)}
.hb-item.is-current{color:var(--night-ink);border-left:2px solid var(--gold-vivid);padding-left:var(--s2)}
.hb-item-duration{flex:0 0 auto;font-family:var(--mono);font-size:.68rem}

.hb-player{min-width:0;padding:var(--s3);border:1px solid var(--night-line);background:color-mix(in srgb,var(--night-ink) 3%,var(--night))}
.hb-player__status{padding-bottom:var(--s2);border-bottom:1px solid var(--night-line);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--night-muted)}
.hb-player__gate:not(:empty){margin-top:var(--s3)}
.hb-player__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);margin-top:var(--s3)}
.hb-player__controls .hb-btn{padding:var(--s1) var(--s2)}
.hb-player__controls #pbPlay{grid-column:1 / -1;grid-row:1}
.hb-player__seek{margin-top:var(--s3);color:var(--night-muted);font-family:var(--mono);font-size:.64rem}
.hb-player__seek input{min-width:0;width:100%;accent-color:var(--gold-vivid)}
.hb-player__time{display:block;margin-top:var(--s1);text-align:right;color:var(--night-muted);font-family:var(--mono);font-size:.68rem}
#fm-hashboard-audio{display:none}

/* Authenticated Oracle: public runtime DOM, scoped to the HashBoard view. */
.hb-oracle-view .hb-viewhead{margin-bottom:var(--s3)}
.hb-oracle-gate:not(:empty){margin-bottom:var(--s3)}
.hb-oroom{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:clamp(var(--s3),5vw,var(--s5));border:1px solid var(--night-line);text-align:center}
.hb-oroom .oring{width:clamp(112px,18vw,190px);height:auto;transform-origin:50% 50%;animation:hb-oracle-turn 60s linear infinite}
.hb-oroom .oring circle.main{fill:none;stroke:url(#hboracle-poles);stroke-width:.6}
.hb-oroom .oring .on{fill:var(--gold-vivid)}
.hb-oroom .oring .os{fill:var(--cobalt)}
@keyframes hb-oracle-turn{to{transform:rotate(360deg)}}
.hb-oroom .ask{width:100%;max-width:640px;display:flex;flex-direction:column;gap:var(--s2)}
.hb-oroom .ask label{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--night-muted)}
.hb-oroom .field{display:flex;align-items:center;gap:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--night-line)}
.hb-oroom .field:focus-within{border-image:linear-gradient(90deg,var(--gold-vivid),var(--cobalt)) 1}
.hb-oroom .field input{min-width:0;flex:1;padding:var(--s1) 0;border:0;outline:0;background:transparent;color:var(--night-ink);font:inherit;font-size:clamp(1rem,2.4vw,1.4rem)}
.hb-oroom .field input::placeholder{color:var(--faint)}
.hb-oroom .field button{padding:var(--s1);border:0;background:transparent;color:var(--night-ink);cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.hb-oroom button:disabled,.hb-oroom input:disabled{opacity:.45;cursor:not-allowed}
.hb-oroom .orstatus{width:100%;max-width:720px;outline:none}
.hb-oroom #revelation,.hb-oroom #session{padding-block:0}
.hb-oroom .orcopy{margin:0;color:var(--night-muted);line-height:1.65}
.hb-oroom .orcontext{max-width:62ch;margin:0 auto;color:var(--night-muted);font-size:.78rem}
.hb-oroom .askmeta{display:flex;justify-content:space-between;gap:var(--s2);min-height:1.5em;color:var(--night-muted);font-family:var(--mono);font-size:.68rem}
.hb-oroom #qmsg{text-align:left}
.hb-oroom #qcount{margin-left:auto;white-space:nowrap}
.hb-oroom .readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);text-align:left}
.hb-oroom .reading{min-width:0;padding-top:var(--s3);border-top:1px solid var(--night-line)}
.hb-oroom .reading h2{margin:0 0 var(--s2);color:var(--gold-vivid);font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
/* Canonical orbital composition from b68af9ef; preserve across HashBoard migrations. */
.hb-oroom .reading-media{width:min(100%,clamp(240px,26vw,360px));aspect-ratio:1;margin:0 auto var(--s3);overflow:hidden;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--gold-vivid) 7%,transparent) 0,color-mix(in srgb,var(--cobalt) 5%,transparent) 48%,transparent 72%);box-shadow:0 0 32px color-mix(in srgb,var(--gold-vivid) 5%,transparent);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 72%)}
.hb-oroom .reading-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hb-oroom .reading-mark{display:grid;width:100%;height:100%;place-items:center}
.hb-oroom .reading-mark::before{content:"";width:30%;aspect-ratio:1;border:1px solid var(--night-line);border-radius:50%}
.hb-oroom .reading-summary{margin:0 0 var(--s2);color:var(--night-ink);line-height:1.5}
.hb-oroom .reading-body{margin:0;color:var(--night-muted);font-size:.92rem;line-height:1.7}
.hb-oroom .session-actions,.hb-oroom .recovery-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s2)}
.hb-oroom .session-actions{margin-top:0}
.hb-oroom .recovery-actions{margin-top:var(--s3)}
.hb-oroom .oracle-action{padding:var(--s2);border:1px solid var(--night-line);background:transparent;color:var(--night-ink);cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.hb-oroom .oracle-action:hover,.hb-oroom .oracle-action:focus-visible{border-color:var(--gold-vivid);color:var(--gold-vivid)}
/* Si preme anche in piedi, con una mano sola: quarantaquattro pixel sono
   la misura sotto la quale un bersaglio comincia a sfuggire. */
.hb-oroom .oracle-action{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.hb-oroom .audio-controls{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--night-line)}
.hb-oroom .audio-phase,.hb-oroom .audio-status{margin:var(--s1) 0;color:var(--night-muted);font-family:var(--mono);font-size:.68rem}
.hb-oroom .audio-phase{color:var(--gold-vivid)}

/* Progresso della sessione: un tratto, non un lettore musicale.
   Il tempo si legge in cifre prima che nella barra, cosi' resta comprensibile
   anche senza colore e anche se questo foglio non arriva. */
.hb-oroom .audio-progress{margin:var(--s2) 0}
.hb-oroom .audio-times{display:flex;justify-content:space-between;gap:var(--s2);
  margin:0 0 6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--night-muted);font-variant-numeric:tabular-nums}
.hb-oroom .audio-bar{position:relative;height:3px;background:rgba(56,68,180,.28);
  overflow:hidden}
.hb-oroom .audio-bar-fill{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-vivid));
  transition:width .45s linear}
/* I confini fra le tre fasi: si vedono se li cerchi, non prima. */
.hb-oroom .audio-bar-mark{position:absolute;top:0;bottom:0;width:1px;
  background:var(--night);opacity:.85}
@media (prefers-reduced-motion:reduce){
  .hb-oroom .audio-bar-fill{transition:none}
}
@media (max-width:560px){
  .hb-oroom .audio-times{font-size:.62rem}
}
.hb-oroom #session-message{min-height:1.5em}
.hb-oroom #oracle-cooldown-output{white-space:pre-line}
.hb-oroom [data-oracle-panel]{display:none}
.hb-oroom[data-state="idle"] #askform,.hb-oroom[data-state="validating"] #askform,
.hb-oroom[data-state="opening"] #opening,.hb-oroom[data-state="waiting"] #waiting,
.hb-oroom[data-state="revelation"] #revelation,.hb-oroom[data-state="audio"] #revelation,
.hb-oroom[data-state="revelation"] #session,.hb-oroom[data-state="audio"] #session,
.hb-oroom[data-state="error"] #oracle-error,.hb-oroom[data-state="cooldown"] #oracle-cooldown,
.hb-oroom[data-state="renew"] #renewing{display:block}
.hb-oroom[data-state="revelation"] #revelation,.hb-oroom[data-state="audio"] #revelation{display:grid}

@media (max-width:900px){
  .hb-threshold{grid-template-columns:1fr;padding:var(--s3)}
  .hb-threshold__actions{justify-content:flex-start}
  /* Barra compatta: marchio e controllo account, nient'altro. Le quattro
     funzioni sono nel pannello — spostate li' da matchMedia, non nascoste
     con display:none, cosi' non esistono in due copie. */
  .hb-appbar__inner{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:56px;
  }

  .hb-panel{
    right:0;
    left:0;
    min-width:0;
    padding-inline:var(--s3);
    padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - 56px - env(safe-area-inset-top,0px));
    overflow-y:auto;
  }

  /* Nel pannello la navigazione e' un elenco, e la voce attiva porta un
     marcatore a sinistra: si vede anche senza distinguere l'oro. */
  .hb-panel .hb-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding-bottom:var(--s2);
    border-bottom:1px solid var(--night-line);
  }
  .hb-panel .hb-nav a{
    min-height:48px;
    padding-inline:var(--s2);
    border-left:2px solid transparent;
  }
  .hb-panel .hb-nav a::after{display:none}
  .hb-panel .hb-nav a[aria-current="page"]{
    border-left-color:var(--gold-vivid);
    background:color-mix(in srgb,var(--gold-vivid) 8%,transparent);
  }

  .hb-chips::-webkit-scrollbar{height:calc(var(--s1) / 2)}

  .hb-chips::-webkit-scrollbar-thumb{background:var(--night-line)}
}

@media (max-width:719px){
  .hb-appbar__inner{
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s2);
    padding-inline:var(--s3);
  }

  .hb-brand{overflow:hidden;text-overflow:ellipsis;font-size:.6rem;letter-spacing:.18em}
  .hb-session{max-width:100%;justify-self:end;gap:var(--s1)}
  /* Sul telefono resta il segno: un nome tagliato a meta' parola non e' un
     nome. Per intero sta nel pannello, dove c'e' spazio per leggerlo. */
  .hb-account__name{display:none}
  /* Senza il nome accanto resterebbe il solo cerchio da 32 px: il bersaglio
     tattile lo si allarga, non lo si lascia alla misura del disegno. */
  .hb-account{min-width:44px;justify-content:flex-end}

  .hb-main{padding-inline:var(--s3)}
  .hb-view{padding-block:var(--s4)}

  .hb-viewhead{
    align-items:flex-start;
    flex-direction:column;
  }

  .hb-row{
    grid-template-columns:1fr;
    gap:var(--s2);
  }

  .hb-row__action{justify-self:start}
  .hb-definition-grid{grid-template-columns:1fr}
  .hb-btn{width:100%}
  .hb-back{width:auto}
  .hb-player-controls{width:100%}
  .hb-player-controls .hb-btn{
    flex:1 1 calc(50% - var(--s1));
    min-width:0;
    width:auto;
  }
  .hb-sectionhead{align-items:flex-start;flex-direction:column}
  .hb-seq{grid-template-columns:1fr}
  .hb-action{grid-column:1;grid-row:auto;width:100%}
  .hb-sequence-layout{grid-template-columns:1fr}
  .hb-player__controls{grid-template-columns:1fr}
  .hb-player__controls #pbPlay{grid-column:1}
  .hb-oroom .field{align-items:stretch;flex-direction:column}
  .hb-oroom .field button{width:100%;border:1px solid var(--night-line)}
  .hb-oroom .readings{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .hb-nav a::after,
  .hb-btn{transition:none}
  .hb-state--loading::after{animation:none;display:none}
  .hb-oroom .oring{animation:none;opacity:.65}
}

/* Ritorno al sito pubblico: sempre presente, distinto dalle destinazioni
   applicative perche' esce dall'app. Target minimo 44px come il resto. */