/* Pattern Book — tool buttons.
   ---------------------------------------------------------------------------
   The one square control used over every drawing and map on the site: the
   building designer's bar (pan, select, delete, mirror, show permitted, remove
   proposal), the area map tool's bar (pan, pin, select, deselect, clear, show
   all, warnings, draw) and the site's own (picture, 3D, full screen, photos).

   Moved out of the building designer on 1 November 2026 so the designer, the
   map tool and the site read one file. The materials are Alex's (MATERIAL
   SYSTEM, v103.x): jet with a grain and a patina when idle; lit porcelain
   with a warm nimbus when the tool is in hand or the switch is on; teal soap
   for the one coloured switch (what is already permitted). Glyphs get a
   faint brushed edge from an SVG filter, #pb-brush, which every document that
   uses this file must carry (the markup is at the end of this file).

   Markup:  <button class="pb-tool" aria-label="Pan" data-tip="Pan">
              <svg viewBox="0 0 24 24">…</svg>
            </button>
   States:  aria-pressed="true", .on, aria-expanded="true"  — lit (in hand / on)
            .is-flash                                       — lit for a moment (an action)
            .pb-tool--teal                                  — the teal soap switch; aria-pressed="false" pales it
   A row:   <div class="pb-tools">…</div>  (10px apart)
   The glyph is 30px inside a 54px square, radius 11.
   ------------------------------------------------------------------------- */
:root{
  --pb-ink:#1e1c19;
  --pb-jet:#1f1d1a;
  --pb-jet-hi:#2e2b27;
  --pb-jet-edge:#100f0d;
  --pb-jet-ink:#f3ede2;
  --pb-porcelain:#f6f2ea;
  --pb-porcelain-lo:#ece6db;
  --pb-porcelain-edge:#dad2c4;
  --pb-porcelain-glow:rgba(240,156,72,.48);
  --pb-porcelain-core:#fffaf1;
  --pb-grain-jet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.89 0 0 0 0 0.82 0.45 0 0 0 -0.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --pb-patina-jet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.72 0 0 0 0 0.64 0.55 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --pb-grain-porcelain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.28 0.4 0 0 0 -0.16'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --pb-shadow-raise:0 1px 1px rgba(46,36,24,.16), 0 3px 8px rgba(46,36,24,.13);
  --pb-shadow-float:0 1px 2px rgba(46,36,24,.08), 0 8px 22px rgba(46,36,24,.11);
  --pb-nimbus:0 0 0 1px rgba(232,168,100,.55), 0 0 9px 1px var(--pb-porcelain-glow), 0 0 22px 4px rgba(240,156,72,.16);
  --pb-r-btn:8px;
  --pb-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Charter,"Bitstream Charter",Georgia,serif;
  --pb-surface-jet:var(--pb-grain-jet), var(--pb-patina-jet), linear-gradient(172deg, var(--pb-jet-hi), var(--pb-jet) 58%, #1a1816);
  --pb-surface-jet-hover:var(--pb-grain-jet), var(--pb-patina-jet), linear-gradient(172deg, #3a362f, #282521 58%, #1f1d1a);
  --pb-surface-porcelain:var(--pb-grain-porcelain), linear-gradient(176deg, var(--pb-porcelain), var(--pb-porcelain-lo));
  --pb-surface-porcelain-lit:var(--pb-grain-porcelain), radial-gradient(90% 85% at 50% 42%, var(--pb-porcelain-core) 0 38%, #f7efe2 72%, #f1e4d1);
  --pb-soap-teal:#4fa6a2;
  --pb-soap-teal-deep:#469995;
  --pb-soap-fuchsia:#ab6497;
  --pb-soap-fuchsia-deep:#9e5a8b;
  --pb-grain-soap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.075' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.1  0 0 0 2.4 -1.35'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url%28%23m%29' opacity='.20'/%3E%3Crect width='120' height='120' filter='url%28%23d%29' opacity='.16'/%3E%3Crect width='120' height='120' filter='url%28%23g%29' opacity='.10'/%3E%3C/svg%3E");
}

.pb-tools{ display:flex; flex-direction:row; align-items:flex-start; gap:10px; }

.pb-tool{
  width:54px; height:54px; padding:0; margin:0; border-radius:11px; position:relative;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-sizing:border-box;
  background:var(--pb-surface-jet); color:var(--pb-jet-ink);
  border:1px solid var(--pb-jet-edge);
  box-shadow:inset 0 2px 0 rgba(255,244,226,.07), 0 2px 2px rgba(46,36,24,.16), 0 5px 13px rgba(46,36,24,.13);
  transition:background .15s, box-shadow .2s, color .15s, border-color .15s;
  font:inherit; -webkit-appearance:none; appearance:none;
}
.pb-tool:hover:not(:disabled){ background:var(--pb-surface-jet-hover); border-color:var(--pb-jet-edge); color:var(--pb-jet-ink); }
.pb-tool:focus-visible{ outline:3px solid var(--pb-ink); outline-offset:3px; }
.pb-tool:disabled{ opacity:.45; cursor:default; }
/* lit: the tool in hand, the switch on, the menu open, or an action answering a press */
.pb-tool[aria-pressed="true"], .pb-tool[aria-pressed="true"]:hover,
.pb-tool.on, .pb-tool.on:hover,
.pb-tool[aria-expanded="true"], .pb-tool[aria-expanded="true"]:hover,
.pb-tool.is-flash{
  background:var(--pb-surface-porcelain-lit); color:var(--pb-ink);
  border-color:rgba(226,168,108,.75);
  box-shadow:inset 0 0 8px 2px rgba(255,238,212,.95),
    0 0 0 1.5px rgba(232,168,100,.55), 0 0 14px 2px var(--pb-porcelain-glow), 0 0 35px 6px rgba(240,156,72,.16);
}
/* the glyph: 30px, with the brushed edge and a hair of shadow on jet */
.pb-tool svg, .pb-tool .pb-glyph{ width:30px; height:30px; display:block; flex:none; }
.pb-tool svg{ filter:url(#pb-brush) drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.pb-tool[aria-pressed="true"] svg, .pb-tool.on svg, .pb-tool[aria-expanded="true"] svg, .pb-tool.is-flash svg{ filter:url(#pb-brush); }
.pb-tool .pb-glyph svg{ width:100%; height:100%; }

/* the name, at once, under the button (a native title waits about a second) */
.pb-tool[data-tip]:hover::after, .pb-tool[data-tip]:focus-visible::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  white-space:nowrap; pointer-events:none; z-index:20;
  padding:5px 10px; border-radius:7px;
  background:var(--pb-porcelain); color:var(--pb-ink); border:1px solid var(--pb-porcelain-edge);
  box-shadow:var(--pb-shadow-float); font:500 14px/1.2 var(--pb-serif); letter-spacing:.01em;
}

/* the teal soap switch: shows what is already permitted; paler while it is hidden */
.pb-tool.pb-tool--teal, .pb-tool.pb-tool--teal:hover, .pb-tool.pb-tool--teal[aria-pressed="true"], .pb-tool.pb-tool--teal[aria-pressed="true"]:hover{
  --pb-soap:var(--pb-soap-teal); --pb-soap-deep:var(--pb-soap-teal-deep);
  background:var(--pb-grain-soap),
    radial-gradient(140% 120% at 40% 30%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--pb-soap), var(--pb-soap-deep)); border:1px solid var(--pb-soap-deep); color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.26), inset 0 0 0 2px rgba(255,255,255,.06), inset 0 -2px 0 rgba(20,40,40,.16),
    0 2px 2px rgba(46,36,24,.16), 0 5px 13px rgba(46,36,24,.13);
}
.pb-tool.pb-tool--teal svg{ filter:url(#pb-brush) drop-shadow(0 1px 0 rgba(0,0,0,.22)); }
.pb-tool.pb-tool--teal:hover{ filter:brightness(1.05); }
.pb-tool.pb-tool--teal[aria-pressed="false"]{ filter:saturate(.45) brightness(1.12); opacity:.8; }
.pb-tool.pb-tool--teal[aria-pressed="false"]:hover{ opacity:.95; }

/* The brushed edge. Paste once into each document that uses this file:
<svg width="0" height="0" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true" focusable="false"><defs><filter id="pb-brush" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="4" result="t"/><feDisplacementMap in="SourceGraphic" in2="t" scale="0.55" xChannelSelector="R" yChannelSelector="G"/></filter></defs></svg>
*/