.hive-wall-host{
  width:100%;
  min-height:100vh;
}

.honey-wall .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.honey-wall{
  --honey-gold:#d7a62d;
  --honey-amber:#f2bd3d;
  --honey-ink:#0b0a08;
  --honey-paper:#f7edcd;
  position:relative;
  isolation:isolate;
  width:100vw;
  min-height:100vh;
  margin-inline:calc(50% - 50vw);
  color:var(--text,#efe9dc);
  background:
    radial-gradient(circle at 48% 4%,rgba(219,168,45,.13),transparent 26rem),
    linear-gradient(180deg,rgba(12,10,7,.1),rgba(6,6,5,.82) 62%,#070706);
  overflow:clip visible;
}

.honey-wall::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.24;
  background:
    linear-gradient(30deg,transparent 46%,rgba(215,166,45,.09) 47%,rgba(215,166,45,.09) 49%,transparent 50%) 0 0/52px 90px,
    linear-gradient(150deg,transparent 46%,rgba(215,166,45,.07) 47%,rgba(215,166,45,.07) 49%,transparent 50%) 0 0/52px 90px;
  mask-image:linear-gradient(to bottom,#000 0,#000 74%,transparent 100%);
}

.honey-wall::after{
  content:"";
  position:fixed;
  inset:auto -12vw -24vh;
  height:58vh;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background:radial-gradient(ellipse at center,rgba(215,166,45,.28),transparent 66%);
}

.honey-toolbar{
  position:sticky;
  top:10px;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:max-content;
  max-width:calc(100vw - 22px);
  margin:10px auto 0;
  padding:7px;
  border:1px solid rgba(215,166,45,.2);
  border-radius:999px;
  background:rgba(9,8,6,.76);
  box-shadow:0 12px 42px rgba(0,0,0,.33);
  backdrop-filter:blur(18px) saturate(1.15);
}

.honey-toolbar-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.honey-tool-mode{
  border-color:rgba(242,189,61,.48);
  background:rgba(215,166,45,.08);
}

.honey-wall[data-wall-mode="list"] .honey-toolbar-view{display:none}

.honey-tool{
  appearance:none;
  border:1px solid rgba(215,166,45,.22);
  border-radius:999px;
  min-width:44px;
  min-height:44px;
  padding:7px 13px;
  color:var(--text,#efe9dc);
  background:rgba(255,255,255,.025);
  font:700 11px/1.1 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.055em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}

.honey-tool:hover{
  border-color:rgba(242,189,61,.72);
  color:#fff4d0;
  background:rgba(215,166,45,.09);
  transform:translateY(-1px);
}

.honey-tool:focus-visible,
.honey-comb:focus-visible,
.honey-growth-slot:focus-visible,
.honey-relation-link:focus-visible,
.honey-sheet-close:focus-visible,
.honey-compose textarea:focus-visible,
.honey-report-form select:focus-visible,
.honey-operator-form textarea:focus-visible,
.honey-watch textarea:focus-visible,
.honey-watch-case:focus-visible{
  outline:3px solid #f6c34a;
  outline-offset:3px;
}

.honey-tool:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.honey-tool-primary{
  border-color:#d7a62d;
  color:#161006;
  background:linear-gradient(135deg,#f6ce65,#cc9221);
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 7px 20px rgba(190,125,14,.16);
}

.honey-tool-primary:hover{
  color:#080603;
  background:linear-gradient(135deg,#ffe083,#d9a02e);
}

.honey-welcome{
  position:relative;
  z-index:3;
  width:min(780px,calc(100vw - 36px));
  margin:clamp(52px,9vw,110px) auto 0;
  text-align:center;
}

.honey-welcome h2{
  margin:8px 0 12px;
  color:#f7edcd;
  font:800 clamp(42px,8vw,88px)/.9 var(--font-display,"Arial Narrow",sans-serif);
  letter-spacing:.015em;
  text-transform:uppercase;
  text-shadow:0 0 46px rgba(215,166,45,.18);
}

.honey-welcome>p:not(.honey-eyebrow){
  max-width:680px;
  margin:0 auto;
  color:rgba(239,233,220,.72);
  font:400 clamp(14px,2vw,17px)/1.65 var(--font-body,system-ui,sans-serif);
}

.honey-start-guide{
  width:min(720px,100%);
  margin:24px auto 0;
  padding:0 18px 16px;
  border:1px solid rgba(215,166,45,.22);
  border-radius:16px;
  color:rgba(239,233,220,.76);
  background:rgba(9,8,6,.62);
  text-align:left;
}

.honey-start-guide summary{
  min-height:44px;
  padding:14px 2px 10px;
  color:#f2bd3d;
  font:800 11px/1.35 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.honey-start-guide summary:focus-visible{outline:3px solid #f6c34a;outline-offset:3px}

.honey-start-guide ol{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:4px 0 12px;
  padding:0;
  list-style:none;
  counter-reset:honey-step;
}

.honey-start-guide li{
  position:relative;
  min-width:0;
  padding:13px 12px 13px 42px;
  border-radius:12px;
  background:rgba(215,166,45,.065);
  counter-increment:honey-step;
}

.honey-start-guide li::before{
  content:counter(honey-step);
  position:absolute;
  top:12px;
  left:12px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:1px solid rgba(242,189,61,.55);
  border-radius:50%;
  color:#f6ce65;
  font:800 10px/1 var(--font-mono,ui-monospace,monospace);
}

.honey-start-guide strong,
.honey-start-guide span{display:block}
.honey-start-guide strong{color:#f7edcd;font:750 13px/1.3 var(--font-body,system-ui,sans-serif)}
.honey-start-guide span{margin-top:4px;font:500 12px/1.45 var(--font-body,system-ui,sans-serif)}
.honey-start-guide>p{margin:0;color:rgba(239,233,220,.62);font:550 11px/1.5 var(--font-body,system-ui,sans-serif)}

[data-wall-new-count]{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  min-height:18px;
  margin-left:3px;
  border-radius:999px;
  color:#090703;
  background:#ffd15c;
  font-size:10px;
}

.honey-zoom{
  min-width:44px;
  color:rgba(239,233,220,.62);
  text-align:center;
  font:700 10px var(--font-mono,ui-monospace,monospace);
}

.honey-summary{
  position:relative;
  z-index:3;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin:42px auto -8px;
  color:rgba(239,233,220,.58);
  font:600 10px/1.4 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}

.honey-summary-mark{
  color:#e9b73c;
  font-size:12px;
  letter-spacing:.2em;
}

.honey-wall[data-connection="offline"] .honey-summary::after,
.honey-wall[data-connection="stale"] .honey-summary::after,
.honey-wall[data-connection="reconnecting"] .honey-summary::after{
  content:"Last good wall · reconnecting";
  margin-left:4px;
  color:#d9a84a;
}

.honey-wall[data-connection="offline"] .honey-summary::after{content:"Offline · read only"}

/* The stage is the window onto the Hive, not a slice of the document. It owns
   a fixed box and the plane inside it is flown by the camera, which is what
   makes zooming out to the whole wall and roaming around possible at all. */
.honey-stage{
  position:relative;
  z-index:1;
  width:100%;
  /* Sized purely in live viewport units. A scripted height would have to be
     refreshed on every rotation and keyboard event, and any missed update
     leaves the map either taller than the screen or needlessly short. The
     compose sheet is a modal over the stage, so it needs no inset here. */
  height:clamp(360px,calc(100svh - 76px),1500px);
  overflow:clip;
  /* The wall consumes every drag direction itself, so the browser must not
     claim vertical drags for page scroll or the pan would fight the page. */
  touch-action:none;
  overscroll-behavior:contain;
  cursor:grab;
  outline:none;
  contain:layout paint style;
}

.honey-stage:active{cursor:grabbing}

.honey-stage:focus-visible{
  outline:3px solid #f6c34a;
  outline-offset:-3px;
}

.honey-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,6,5,.9),transparent 9%,transparent 91%,rgba(6,6,5,.9)),
    radial-gradient(ellipse at 50% 10%,rgba(215,166,45,.045),transparent 48%);
}

.honey-plane{
  position:absolute;
  top:0;
  left:50%;
  transform-origin:top center;
}

.honey-plane.is-panning{will-change:transform}

/* Camera moves that were asked for rather than dragged glide instead of
   snapping. Dragging and pinching never carry this class, so they stay
   frame-exact under the finger. */
.honey-plane.is-gliding{
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.honey-connections,
.honey-cells,
.honey-growth-slots{
  position:absolute;
  inset:0;
}

.honey-growth-slots{z-index:8;pointer-events:none}

.honey-link{
  position:absolute;
  z-index:1;
  height:5px;
  border-radius:999px;
  transform-origin:0 50%;
  background:linear-gradient(90deg,
    hsla(var(--thread-hue),78%,57%,.18),
    hsla(var(--thread-hue),84%,63%,.64),
    hsla(var(--thread-hue),78%,57%,.18));
  box-shadow:0 0 18px hsla(var(--thread-hue),85%,54%,.22);
}

.honey-link[data-relation="branch"]{
  height:7px;
  background:repeating-linear-gradient(90deg,
    hsla(var(--source-hue),84%,64%,.82) 0 12px,
    rgba(8,7,5,.9) 12px 17px,
    hsla(var(--thread-hue),84%,64%,.82) 17px 29px,
    rgba(8,7,5,.9) 29px 34px);
  box-shadow:0 0 16px hsla(var(--thread-hue),85%,54%,.25);
}

.honey-link[data-relation="meet"]{
  height:9px;
  border:1px solid rgba(255,239,181,.65);
  background:linear-gradient(90deg,
    hsla(var(--source-hue),86%,60%,.9) 0 42%,
    #f7edcd 48% 52%,
    hsla(var(--thread-hue),86%,60%,.9) 58% 100%);
  box-shadow:0 0 20px hsla(var(--thread-hue),85%,54%,.32);
}

.honey-link.is-refreshing{
  opacity:.34;
  background:rgba(151,139,112,.36);
  box-shadow:none;
}

.honey-comb,
.honey-target{
  position:absolute;
  width:151px;
  height:172px;
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

.honey-comb{
  z-index:3;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  color:#f7edcd;
  background:linear-gradient(145deg,
    hsla(var(--thread-hue),72%,58%,.88),
    hsla(var(--thread-hue),70%,31%,.72) 22%,
    rgba(19,15,8,.98) 48%,
    rgba(6,6,5,.99));
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.42));
  cursor:pointer;
  transition:filter .2s ease,z-index .01s linear;
}

.honey-comb::before{
  content:"";
  position:absolute;
  inset:3px;
  clip-path:inherit;
  background:
    radial-gradient(circle at 32% 19%,rgba(255,238,176,.2),transparent 24%),
    linear-gradient(150deg,rgba(255,255,255,.08),transparent 34%);
  pointer-events:none;
}

.honey-comb[data-thread-pattern="1"]::before{
  background:
    repeating-linear-gradient(60deg,rgba(255,246,211,.11) 0 3px,transparent 3px 12px),
    radial-gradient(circle at 32% 19%,rgba(255,238,176,.2),transparent 24%);
}

.honey-comb[data-thread-pattern="2"]::before{
  background:
    radial-gradient(circle,rgba(255,246,211,.13) 0 2px,transparent 2.5px) 0 0/14px 14px,
    linear-gradient(150deg,rgba(255,255,255,.08),transparent 34%);
}

.honey-comb[data-thread-pattern="3"]::before{
  background:
    repeating-linear-gradient(120deg,rgba(255,246,211,.1) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(30deg,rgba(255,246,211,.055) 0 2px,transparent 2px 12px);
}

.honey-comb::after{
  content:"";
  position:absolute;
  inset:7px;
  clip-path:inherit;
  border:1px solid hsla(var(--thread-hue),78%,67%,.32);
  background:rgba(9,8,6,.54);
  pointer-events:none;
}

.honey-comb:hover,
.honey-comb:focus-visible{
  z-index:9;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.5)) drop-shadow(0 0 14px hsla(var(--thread-hue),85%,58%,.28));
}

.honey-comb.is-selected{
  z-index:10;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 17px rgba(246,200,76,.9)) drop-shadow(0 16px 24px rgba(0,0,0,.5));
}

.honey-comb.is-selected::after{
  border:3px solid #f6c84c;
  box-shadow:inset 0 0 0 2px rgba(8,7,5,.82);
}

.honey-comb.is-unseen::before{
  background:
    radial-gradient(circle at 50% 11%,#ffdf75 0 4px,rgba(255,205,75,.55) 5px,transparent 15px),
    linear-gradient(150deg,rgba(255,255,255,.12),transparent 34%);
}

.honey-comb.is-mine::after{border-color:rgba(255,239,181,.7)}

.honey-comb.is-branch-origin::after{border-width:3px;border-style:dashed}
.honey-comb.is-meet-origin::after{border:4px double #f7d878;box-shadow:inset 0 0 0 2px rgba(8,7,5,.75)}

.honey-comb[data-placeholder="true"]{
  color:transparent;
  background:linear-gradient(145deg,rgba(137,126,100,.22),rgba(8,8,7,.92));
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.28));
  cursor:wait;
}

.honey-comb[data-placeholder="true"]::before{background:rgba(220,205,163,.05)}
.honey-comb[data-placeholder="true"]::after{border-color:rgba(220,205,163,.18);background:rgba(9,8,7,.66)}

.honey-growth-slot{
  position:absolute;
  width:151px;
  height:172px;
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  border:0;
  color:#171006;
  background:rgba(246,200,76,.82);
  box-shadow:inset 0 0 0 4px rgba(255,244,196,.88),0 0 28px rgba(246,190,54,.42);
  font:800 30px/1 var(--font-body,system-ui,sans-serif);
  cursor:pointer;
  pointer-events:auto;
}

.honey-growth-slot:disabled{
  color:rgba(239,233,220,.5);
  background:rgba(47,43,35,.56);
  box-shadow:inset 0 0 0 2px rgba(239,233,220,.12);
  cursor:not-allowed;
  pointer-events:none;
}

.honey-growth-tray{
  position:fixed;
  z-index:55;
  left:50%;
  bottom:calc(18px + var(--honey-keyboard-offset,0px) + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:min(760px,calc(100vw - 24px));
  padding:10px 12px;
  transform:translateX(-50%);
  border:1px solid rgba(242,189,61,.54);
  border-radius:18px;
  color:#f5eedf;
  background:rgba(9,8,6,.94);
  box-shadow:0 18px 60px rgba(0,0,0,.66);
  backdrop-filter:blur(16px);
  font:650 12px/1.45 var(--font-body,system-ui,sans-serif);
}

.honey-growth-tray[hidden]{display:none}
.honey-growth-tray>[data-wall-growth-copy]{flex:1 1 260px}

.honey-comb[data-status="author_removed"],
.honey-comb[data-status="moderator_removed"]{
  color:rgba(239,233,220,.56);
  background:linear-gradient(145deg,rgba(123,106,69,.56),rgba(9,8,6,.98));
}

.honey-comb[data-status="quarantined"]{
  color:rgba(239,233,220,.62);
  background:linear-gradient(145deg,rgba(154,104,34,.55),rgba(9,8,6,.98));
}

.honey-comb.is-viewer-hidden{
  color:rgba(239,233,220,.62);
  background:linear-gradient(145deg,rgba(126,92,38,.52),rgba(9,8,6,.98));
}

.honey-comb-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:116px;
  min-height:116px;
  padding:10px 5px;
  text-align:center;
}

.honey-comb-author{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#f6c84c;
  font:800 11px/1.2 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.06em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.honey-comb-body{
  display:-webkit-box;
  max-width:112px;
  margin-top:7px;
  overflow:hidden;
  font:600 14px/1.28 var(--font-body,system-ui,sans-serif);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}

.honey-comb-foot{
  display:block;
  margin-top:7px;
  color:rgba(239,233,220,.5);
  font:600 10px/1.2 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Zoom detail tiers. Pulled back far enough, comb text is a grey smear that
   costs layout for nothing, so the wall sheds it in two steps and keeps the
   thread colour and shape, which is what reads at map scale. The tier comes
   from the controller as data-wall-detail; nothing re-renders to change it. */
.honey-wall[data-wall-detail="compact"] .honey-comb-body,
.honey-wall[data-wall-detail="compact"] .honey-comb-foot,
.honey-wall[data-wall-detail="dot"] .honey-comb-inner{
  display:none;
}

.honey-wall[data-wall-detail="compact"] .honey-comb-author{
  font-size:15px;
  letter-spacing:.04em;
}

/* At map scale the hexes carry the colour of their conversation so clusters,
   branches, and meets stay visible as shapes. */
.honey-wall[data-wall-detail="dot"] .honey-comb{
  background:linear-gradient(145deg,
    hsla(var(--thread-hue),74%,62%,.95),
    hsla(var(--thread-hue),68%,38%,.9));
  filter:none;
}

.honey-wall[data-wall-detail="dot"] .honey-comb::before,
.honey-wall[data-wall-detail="dot"] .honey-comb::after{display:none}

.honey-wall[data-wall-detail="dot"] .honey-comb.is-unseen{
  outline:4px solid rgba(255,226,138,.9);
  outline-offset:-4px;
}

.honey-wall[data-wall-detail="dot"] .honey-comb.is-mine{
  outline:4px solid rgba(255,255,255,.82);
  outline-offset:-4px;
}

/* The reticle keeps a constant on-screen weight instead of shrinking away. */
.honey-wall[data-wall-detail="dot"] .honey-target span{display:none}

.honey-wall[data-wall-detail="dot"] .honey-target{
  outline-width:5px;
  outline-offset:-5px;
  outline-color:rgba(246,195,74,.85);
}

.honey-target{
  z-index:2;
  display:grid;
  place-items:center;
  color:rgba(246,195,74,.76);
  background:rgba(215,166,45,.025);
  outline:2px dashed rgba(215,166,45,.36);
  outline-offset:-8px;
  pointer-events:none;
  transition:left .12s ease,top .12s ease,background .15s ease;
}

.honey-target span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(215,166,45,.3);
  border-radius:50%;
  background:rgba(8,7,5,.76);
  font:300 26px/1 var(--font-body,system-ui,sans-serif);
}

.honey-target.is-occupied{
  opacity:.18;
  outline-style:solid;
}

.honey-edge-note{
  position:fixed;
  z-index:25;
  right:164px;
  bottom:max(18px,env(safe-area-inset-bottom));
  max-width:310px;
  padding:10px 14px;
  border:1px solid rgba(215,166,45,.18);
  border-radius:999px;
  color:rgba(239,233,220,.72);
  background:rgba(8,7,5,.76);
  backdrop-filter:blur(14px);
  font:600 10px/1.35 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.03em;
  pointer-events:none;
}

.honey-list{
  width:min(940px,calc(100% - 32px));
  min-height:70vh;
  margin:48px auto 100px;
}

.honey-list-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
}

.honey-list-head>div{min-width:0;max-width:100%}

.honey-list-actions{display:flex;gap:8px;flex-wrap:wrap}

.honey-list h2{
  margin:4px 0 0;
  font:800 clamp(26px,5vw,48px)/1 var(--font-display,var(--font-body,system-ui,sans-serif));
  overflow-wrap:anywhere;
}

.honey-eyebrow{
  margin:0;
  color:#d5a337;
  font:800 9px/1.3 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.honey-list-item{
  position:relative;
  margin:0 0 12px;
  padding:22px 24px 20px 30px;
  border:1px solid rgba(215,166,45,.15);
  border-radius:14px;
  background:linear-gradient(105deg,hsla(var(--thread-hue),74%,49%,.1),rgba(10,9,7,.76) 26%);
  overflow-wrap:anywhere;
}

.honey-list-item::before{
  content:"";
  position:absolute;
  inset:15px auto 15px 12px;
  width:4px;
  border-radius:4px;
  background:hsla(var(--thread-hue),82%,56%,.72);
}

.honey-list-item[data-thread-pattern="1"]::before{background:repeating-linear-gradient(to bottom,hsla(var(--thread-hue),82%,66%,.9) 0 8px,transparent 8px 13px)}
.honey-list-item[data-thread-pattern="2"]::before{background:radial-gradient(circle,hsla(var(--thread-hue),82%,66%,.9) 0 2px,transparent 2.5px) 0 0/4px 10px}
.honey-list-item[data-thread-pattern="3"]::before{width:6px;background:repeating-linear-gradient(135deg,hsla(var(--thread-hue),82%,66%,.9) 0 3px,transparent 3px 7px)}

.honey-list-item h3{margin:0;color:#f2bd3d;font-size:15px}
.honey-list-item>p:not(.honey-list-meta){margin:13px 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}
.honey-list-meta{margin:5px 0 0;color:rgba(239,233,220,.52);font:600 9px var(--font-mono,ui-monospace,monospace);letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}
.honey-list-relation{margin:8px 0 0!important;color:#d8ad48;font:650 11px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.025em;overflow-wrap:anywhere}
.honey-list-item>.honey-tool{margin:0 7px 5px 0}
.honey-list-empty{padding:80px 20px;text-align:center;color:rgba(239,233,220,.58)}

.honey-sheet{
  width:min(660px,calc(100vw - 24px));
  max-height:min(84vh,760px);
  max-height:min(calc(var(--honey-visual-height,100dvh) - 28px),760px);
  margin:auto auto calc(14px + var(--honey-keyboard-offset,0px));
  padding:0;
  overflow:auto;
  border:1px solid rgba(230,178,54,.34);
  border-radius:22px;
  color:var(--text,#efe9dc);
  background:linear-gradient(150deg,rgba(25,20,11,.985),rgba(7,7,6,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.025) inset;
}

.honey-sheet::backdrop{
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(5px);
}

.honey-sheet>*,
.honey-sheet>form{box-sizing:border-box}
.honey-sheet>form{padding:0 24px 24px}
.honey-reader{padding:0 24px 24px}

.honey-sheet-grip{
  width:56px;
  height:4px;
  margin:10px auto 8px;
  border-radius:99px;
  background:rgba(239,233,220,.24);
}

.honey-sheet-head{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:18px;
  padding:10px 0 14px;
}

.honey-sheet-head>div{min-width:0}

.honey-sheet-head h2{
  margin:4px 0 0;
  font:800 clamp(22px,5vw,34px)/1.05 var(--font-display,var(--font-body,system-ui,sans-serif));
  overflow-wrap:anywhere;
}

.honey-sheet-close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px solid rgba(215,166,45,.22);
  border-radius:50%;
  color:rgba(239,233,220,.75);
  background:rgba(255,255,255,.03);
  font:300 26px/1 system-ui,sans-serif;
  cursor:pointer;
}

.honey-compose-place,
.honey-reader-meta{
  margin:0 0 17px;
  color:rgba(239,233,220,.54);
  font:600 10px/1.45 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.035em;
}

.honey-compose-label,
.honey-report-form label,
.honey-conversation-choices legend{
  display:block;
  margin:0 0 8px;
  color:#e9b53b;
  font:800 10px/1.3 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.09em;
  text-transform:uppercase;
}

.honey-compose textarea,
.honey-report-form select{
  box-sizing:border-box;
  width:100%;
  border:1px solid #9a7e2c;
  border-radius:13px;
  color:#f5eedf;
  background:rgba(0,0,0,.32);
  font:500 16px/1.5 var(--font-body,system-ui,sans-serif);
}

.honey-compose textarea{min-height:154px;padding:15px 16px;resize:vertical}
.honey-report-form select{min-height:46px;padding:10px 12px}
.honey-compose textarea::placeholder,
.honey-operator-form textarea::placeholder,
.honey-watch textarea::placeholder{color:rgba(239,233,220,.7);opacity:1}

.honey-compose-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:8px 2px 0;
  color:rgba(239,233,220,.72);
  font:600 10px/1.4 var(--font-mono,ui-monospace,monospace);
}

.honey-conversation-choices{
  margin:0 0 17px;
  padding:0;
  border:0;
}

.honey-conversation-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-height:44px;
  margin:6px 0;
  padding:7px 11px;
  border:1px solid rgba(215,166,45,.15);
  border-radius:10px;
  color:rgba(239,233,220,.82);
  background:rgba(255,255,255,.022);
  cursor:pointer;
}

.honey-conversation-option:has(input:checked){border-color:rgba(242,189,61,.65);background:rgba(215,166,45,.08)}
.honey-conversation-option input{margin-top:4px;accent-color:#e4ae32}
.honey-conversation-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.honey-conversation-copy strong{color:#f4d06f;font:750 13px/1.3 var(--font-body,system-ui,sans-serif)}
.honey-conversation-copy small{color:rgba(239,233,220,.72);font:550 11px/1.45 var(--font-body,system-ui,sans-serif);overflow-wrap:anywhere}
.honey-choice-pending{margin:8px 0;color:#e8c56f;font:600 12px/1.45 var(--font-body,system-ui,sans-serif)}

.honey-compose-error{
  margin:13px 0 0;
  padding:11px 13px;
  border:1px solid rgba(223,153,54,.4);
  border-radius:10px;
  color:#f2d6a4;
  background:rgba(160,83,17,.13);
  font-size:12px;
}

.honey-sheet-actions{
  position:sticky;
  z-index:3;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px;
  padding:10px 0 max(2px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(8,7,6,.97) 24%);
  flex-wrap:wrap;
}

.honey-reader-body{
  min-height:90px;
  padding:18px 0 22px;
  border-block:1px solid rgba(215,166,45,.13);
  color:#f5eedf;
  font:600 clamp(17px,4vw,22px)/1.5 var(--font-body,system-ui,sans-serif);
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.honey-participants{
  margin:14px 0 0;
  color:rgba(239,233,220,.54);
  font:600 10px/1.45 var(--font-mono,ui-monospace,monospace);
}

.honey-participants strong{color:#deb13f}
.honey-report{margin-left:auto;color:rgba(239,233,220,.64)}

.honey-relations{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 0;
  flex-wrap:wrap;
  color:rgba(239,233,220,.72);
  font:650 10px/1.4 var(--font-mono,ui-monospace,monospace);
}

.honey-relations>strong{color:#efc55d;text-transform:uppercase;letter-spacing:.06em}
.honey-relation-link{
  min-height:44px;
  border:1px dashed rgba(239,197,93,.65);
  border-radius:999px;
  padding:8px 12px;
  color:#f7edcd;
  background:rgba(215,166,45,.08);
  cursor:pointer;
  font:700 10px/1.25 var(--font-mono,ui-monospace,monospace);
}

.honey-report-form{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(215,166,45,.14);
}

.honey-resume-tool{
  border-color:rgba(242,189,61,.58);
  color:#ffe49a;
  background:rgba(215,166,45,.1);
}

.honey-operator-form{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(215,166,45,.2);
}

.honey-operator-form label,
.honey-watch-detail>label{
  display:block;
  margin:0 0 8px;
  color:#e9b53b;
  font:800 10px/1.3 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.09em;
  text-transform:uppercase;
}

.honey-operator-form textarea,
.honey-watch textarea{
  box-sizing:border-box;
  width:100%;
  min-height:96px;
  padding:13px 14px;
  resize:vertical;
  border:1px solid #9a7e2c;
  border-radius:13px;
  color:#f5eedf;
  background:rgba(0,0,0,.34);
  font:500 16px/1.5 var(--font-body,system-ui,sans-serif);
}

.honey-watch{width:min(820px,calc(100vw - 24px))}
.honey-watch-inner{padding:0 24px 26px}
.honey-watch-status{min-height:1.45em;margin:0 0 14px;color:#e4b849;font:700 11px/1.45 var(--font-mono,ui-monospace,monospace)}
.honey-watch-queue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

.honey-watch-case{
  display:flex;
  min-height:72px;
  padding:13px 14px;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  border:1px solid rgba(215,166,45,.2);
  border-radius:12px;
  color:#f3ead8;
  background:rgba(255,255,255,.025);
  text-align:left;
  cursor:pointer;
}

.honey-watch-case:hover{border-color:rgba(242,189,61,.62);background:rgba(215,166,45,.08)}
.honey-watch-case strong{color:#f4c855;font:800 11px/1.35 var(--font-mono,ui-monospace,monospace);letter-spacing:.045em;text-transform:uppercase}
.honey-watch-case span{color:rgba(239,233,220,.66);font:600 11px/1.45 var(--font-mono,ui-monospace,monospace)}
.honey-watch-more{margin-top:12px}

.honey-watch-detail{
  margin-top:20px;
  padding:20px;
  border:1px solid rgba(215,166,45,.25);
  border-radius:16px;
  background:rgba(0,0,0,.25);
}

.honey-watch-detail h3{margin:0 0 9px;color:#f5d276;font:800 24px/1 var(--font-display,var(--font-body,system-ui,sans-serif));text-transform:uppercase}
.honey-watch-detail p{color:rgba(239,233,220,.72);font:500 13px/1.55 var(--font-body,system-ui,sans-serif)}
.honey-watch-detail blockquote{margin:14px 0;padding:14px 16px;border-left:4px solid #d7a62d;border-radius:0 10px 10px 0;color:#fff2cb;background:rgba(215,166,45,.08);font:600 15px/1.55 var(--font-body,system-ui,sans-serif);white-space:pre-wrap;overflow-wrap:anywhere}
.honey-watch-detail [data-wall-watch-reports],
.honey-watch-detail [data-wall-watch-events]{padding:1px 12px;border-left:1px solid rgba(215,166,45,.2)}
.honey-watch button:disabled,.honey-watch textarea:disabled,.honey-reader button:disabled,.honey-reader select:disabled,.honey-reader textarea:disabled{opacity:.48;cursor:wait}

.honey-comb.is-nudged .honey-comb-inner{
  animation:honey-nudge .54s cubic-bezier(.17,.89,.28,1.35);
}

@keyframes honey-nudge{
  0%{transform:translate(0,0)}
  48%{transform:translate(var(--nudge-x),var(--nudge-y))}
  100%{transform:translate(0,0)}
}

@media(max-width:760px){
  .honey-toolbar{
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:calc(100vw - 18px - var(--hive-safe-left,0px) - var(--hive-safe-right,0px));
    max-width:none;
    margin-left:calc(9px + var(--hive-safe-left,0px));
    margin-right:calc(9px + var(--hive-safe-right,0px));
    padding:7px;
    border-radius:18px;
    overflow:visible;
  }
  .honey-toolbar-group{width:100%;gap:4px}
  .honey-toolbar-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
  .honey-toolbar-view{display:grid;grid-template-columns:auto auto 44px 44px 44px}
  .honey-toolbar .honey-tool{min-width:44px;min-height:44px;padding-inline:6px}
  .honey-toolbar-main .honey-tool{width:100%}
  .honey-summary{margin-top:30px;padding-inline:16px;text-align:center;flex-wrap:wrap}
  .honey-welcome{margin-top:34px}.honey-welcome h2{font-size:clamp(40px,14vw,64px)}
  .honey-start-guide{margin-top:18px;padding-inline:12px}
  .honey-start-guide ol{grid-template-columns:1fr;gap:6px}
  .honey-start-guide li{padding-block:10px;padding-left:40px}
  .honey-start-guide li::before{top:9px}
  /* Phones give the map more of the screen because there is less chrome above
     it and the toolbar floats over the top edge. */
  .honey-stage{height:clamp(300px,calc(100svh - 68px),1200px)}
  .honey-edge-note{display:none}
  .honey-sheet{width:calc(100vw - var(--hive-safe-left,0px) - var(--hive-safe-right,0px));max-width:none;max-height:min(88vh,760px);max-height:min(calc(max(1px,var(--honey-visual-height,100dvh)) - 8px),760px);margin:auto var(--hive-safe-right,0px) var(--honey-keyboard-offset,0px) var(--hive-safe-left,0px);border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .honey-sheet>form,.honey-reader{padding-inline:18px}
  .honey-sheet-actions{position:static;justify-content:stretch;background:none}
  .honey-sheet-actions .honey-tool{flex:1 1 auto}
  .honey-report{margin-left:0}
  .honey-list{width:calc(100% - 22px);margin-top:32px}
  .honey-list-head{align-items:start;flex-direction:column}
  .honey-list-actions{width:100%}
  .honey-list-item{padding:20px 18px 18px 26px}
  .honey-watch-inner{padding-inline:18px}
  .honey-watch-queue{grid-template-columns:1fr}
  .honey-watch-detail{padding:16px 14px}
  .honey-growth-tray{bottom:calc(8px + var(--honey-keyboard-offset,0px) + env(safe-area-inset-bottom));width:calc(100vw - 18px - var(--hive-safe-left,0px) - var(--hive-safe-right,0px));flex-wrap:wrap;padding:10px}
  .honey-growth-tray>[data-wall-growth-copy]{flex-basis:100%;text-align:center}
  .honey-growth-tray .honey-tool{flex:1 1 140px}
}

@media(max-height:420px){
  .honey-sheet{max-height:calc(max(1px,var(--honey-visual-height,100dvh)) - 8px);margin-block:auto var(--honey-keyboard-offset,0px);border-radius:14px 14px 0 0}
  .honey-sheet-grip{display:none}
  .honey-sheet-head{padding-block:6px 8px}
  .honey-sheet-head h2{font-size:22px}
  .honey-compose textarea{min-height:88px}
  .honey-reader-body{min-height:54px;padding-block:10px 12px;font-size:16px}
  .honey-sheet-actions{position:static;margin-top:10px;padding-top:8px;background:none}
}

@media(prefers-reduced-motion:reduce){
  .honey-tool,.honey-target,.honey-comb{transition:none}
  .honey-comb.is-nudged .honey-comb-inner{animation:none}
  .honey-plane{will-change:auto}
  /* The camera still travels; it just arrives without the glide. Momentum
     after a flick is suppressed in the controller for the same reason. */
  .honey-plane.is-gliding{transition:none}
}

@media(forced-colors:active){
  .honey-wall::before,.honey-wall::after,.honey-stage::before,.honey-comb::before,.honey-comb::after{display:none}
  .honey-comb,.honey-target,.honey-growth-slot,.honey-tool,.honey-relation-link,.honey-sheet{forced-color-adjust:auto}
  .honey-comb{color:CanvasText;background:Canvas;border:2px solid ButtonText}
  .honey-comb-author,.honey-comb-body,.honey-comb-foot,.honey-list-item,.honey-list-item h3,.honey-list-meta,.honey-list-relation{color:CanvasText}
  .honey-comb.is-selected,.honey-target{outline:3px solid Highlight;outline-offset:-3px}
  .honey-link{background:CanvasText}
  .honey-tool,.honey-growth-slot,.honey-relation-link{color:ButtonText;background:ButtonFace;border-color:ButtonText}
}