/*
 * Symbiose Explorer 1.5.0
 * Front-end synchronization with final Figma system.
 * Figma: Components 160:3071 / Flows 170:25715
 * Data and navigation mechanics intentionally remain in explorer.js / WordPress.
 */

:root{color-scheme:light}
html.symbiose-no-scroll,body.symbiose-no-scroll{overflow:hidden!important}
html.symbiose-webapp-mode,body.symbiose-webapp-mode{margin:0!important;padding:0!important;background:#fff!important;min-height:100%!important}
body.symbiose-webapp-mode #page-container,
body.symbiose-webapp-mode #main-header,
body.symbiose-webapp-mode #main-footer,
body.symbiose-webapp-mode header.et-l--header,
body.symbiose-webapp-mode footer.et-l--footer{display:none!important}
body.symbiose-webapp-mode .symbiose-app-page{margin:0!important;padding:0!important;width:100%!important;max-width:none!important}

.symbiose-app{
  --sym-field:#924c20;
  --sym-artwork:#454545;
  --sym-outline:#cac4d0;
  --sym-on-surface:#49454f;
  --sym-selected:#ede7de;
  --sym-terms:#49745e;
  --sym-question:#e29835;
  --sym-active:#d0d032;
  --sym-perspective:#204492;
  --sym-person:#983d28;
  --sym-location:#5a9b2d;
  --sym-source:#287198;
  --sym-topic:#cac4d0;
  --sym-relation:#cac4d0;
  --sym-white:#fff;
  --sym-font-display:"New Amsterdam",sans-serif;
  --sym-font-label:"Roboto",sans-serif;
  --sym-font-count:"Ranga",cursive;

  box-sizing:border-box;
  width:min(360px,100vw);
  height:100dvh;
  min-height:560px;
  margin:0 auto;
  background:#fff;
  color:var(--sym-on-surface);
  font:400 12px/1.28 var(--sym-font-label);
  overflow:hidden;
  position:relative;
}
.symbiose-app *, .symbiose-app *::before,.symbiose-app *::after{box-sizing:border-box}
.symbiose-app button,.symbiose-app input{font:inherit;color:inherit}
.symbiose-app button{cursor:pointer}
.symbiose-app [hidden]{display:none!important}
.symbiose-loading{height:100%;display:grid;place-items:center;padding:24px;color:var(--sym-on-surface)}

/* =========================================================
   APP SHELL
   ========================================================= */
.symbiose-shell{
  height:100%;
  display:grid;
  grid-template-rows:40px 29px minmax(0,1fr) 0;
  gap:10px;
  padding:16px 25px 0;
  overflow:hidden;
  background:#fff;
}
.symbiose-stage{min-height:0;overflow:hidden;position:relative}
.symbiose-screen{height:100%;min-height:0;overflow:hidden}

/* =========================================================
   HEADER – Figma app-header 210:23535, Standard state
   ========================================================= */
.symbiose-header{
  width:310px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  overflow:visible;
}
.symbiose-head-left{display:flex;align-items:center;gap:8px;min-width:0;height:40px;flex:1 1 auto}
.symbiose-back{
  width:15px;height:40px;border:0;background:transparent;padding:0;
  display:grid;place-items:center;font-size:16px;line-height:1;color:var(--sym-on-surface)
}
.symbiose-head-copy{border:0;background:transparent;padding:0;text-align:left;display:flex;flex-direction:column;justify-content:center;min-width:0}
.symbiose-kicker{
  font:500 11px/10px var(--sym-font-label);letter-spacing:.5px;text-transform:uppercase;color:#665c4f
}
.symbiose-space-title{
  font:400 22px/22px var(--sym-font-display);letter-spacing:0;text-transform:uppercase;color:var(--sym-field);white-space:nowrap
}
.symbiose-head-actions{height:40px;display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:0 0 auto}
.symbiose-logo{
  height:40px;border:0;border-radius:4px;background:var(--sym-artwork);color:#fff;
  padding:4px 8px;display:flex;align-items:center;gap:8px;box-shadow:none
}
.symbiose-logo span{font:400 22px/22px var(--sym-font-display);text-transform:uppercase;white-space:nowrap}
.symbiose-logo b{font:700 18px/18px var(--sym-font-label);letter-spacing:-3px;margin-right:2px}
.symbiose-icon-button{
  width:20px;height:40px;border:0;border-radius:4px;background:var(--sym-artwork);color:#fff;padding:0;
  display:grid;place-items:center;font:500 11px/1 var(--sym-font-label)
}
.symbiose-static-brand{display:none}

/* =========================================================
   TOP TABS – Figma Tabs / oben 207:6375
   ========================================================= */
.symbiose-tabs{
  height:29px;width:100%;display:flex;align-items:stretch;justify-content:space-between;
  border-bottom:1px solid var(--sym-outline);position:relative
}
.symbiose-tabs button{
  border:0;background:transparent;border-radius:4px 4px 0 0;padding:0 16px;height:28px;
  min-width:76px;display:flex;align-items:center;justify-content:center;
  font:500 10px/10px var(--sym-font-label);letter-spacing:.5px;white-space:nowrap
}
.symbiose-tabs button:first-child{color:var(--sym-terms)}
.symbiose-tabs button:last-child{color:var(--sym-question)}
.symbiose-tabs button.is-active{background:var(--sym-selected)}
.symbiose-tabs button.is-active::after{display:none}

/* =========================================================
   TERMS / TERM SPACE
   ========================================================= */
.symbiose-screen[data-screen="terms"]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.symbiose-term-helper{
  min-height:32px;padding:3px 22px 0;text-align:center;
  font:400 11px/13px var(--sym-font-label);color:#665c4f
}
.symbiose-term-grid{
  min-height:0;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:34px;
  align-content:space-evenly;justify-items:center;column-gap:18px;row-gap:8px;
  padding:4px 14px 8px
}
.sym-term-tile{
  width:auto;min-width:62px;max-width:88px;height:34px;border:0;border-radius:4px;
  background:var(--sym-terms);padding:6px 10px;display:flex;align-items:center;justify-content:center;
  color:#fff!important;box-shadow:none;transition:opacity .12s ease,transform .12s ease
}
.sym-term-tile span{font:400 16px/16px var(--sym-font-display);color:inherit!important;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sym-term-tile.is-selected{background:var(--sym-active);color:var(--sym-on-surface)!important}
.sym-term-tile.is-disabled{background:#e5e5e5;color:#9b9b9b!important;opacity:1;cursor:default}
.sym-term-tile:not(.is-disabled):active{transform:scale(.97)}

/* two selected terms: perspectives live as a lower horizontal carousel */
.symbiose-term-perspectives{min-height:0;overflow:hidden;padding:0 0 7px}
.sym-term-perspectives-count,.sym-count-row{
  min-height:19px;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center;white-space:nowrap
}
.sym-term-perspectives-count b,.sym-count-row b{
  font:400 22px/22px var(--sym-font-display);color:var(--sym-perspective)
}
.sym-term-perspectives-count i,.sym-count-row i{
  font:400 11px/10px var(--sym-font-count);font-style:normal;letter-spacing:.5px;color:var(--sym-perspective)
}
.sym-dot-row{display:flex;align-items:center;gap:12px;margin-left:12px}
.sym-dot{width:13px;height:13px;border:0;border-radius:50%;padding:0;background:var(--sym-selected)}
.sym-dot.is-active{background:var(--sym-active)}
.perspective-color .sym-dot.is-active{background:var(--sym-perspective)}
.question-color .sym-dot.is-active{background:var(--sym-question)}
.type-artwork .sym-dot.is-active,.type-counter.type-artwork .sym-dot.is-active{background:var(--sym-artwork)}
.type-person .sym-dot.is-active,.type-counter.type-person .sym-dot.is-active{background:var(--sym-person)}
.type-location .sym-dot.is-active,.type-counter.type-location .sym-dot.is-active{background:var(--sym-location)}
.type-source .sym-dot.is-active,.type-counter.type-source .sym-dot.is-active{background:var(--sym-source)}
.type-term .sym-dot.is-active,.type-counter.type-term .sym-dot.is-active{background:var(--sym-terms)}

.sym-term-perspective-preview{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 0;scrollbar-width:none
}
.sym-term-perspective-preview::-webkit-scrollbar{display:none}
.sym-term-preview-card,.sym-q-perspective-card{
  flex:0 0 113px;min-height:134px;border:0;border-radius:4px;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px;scroll-snap-align:center
}
.sym-term-preview-card span,.sym-q-perspective-card span{
  min-width:67px;max-width:92px;min-height:34px;border-radius:4px;background:var(--sym-terms);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:6px 10px;
  font:400 16px/16px var(--sym-font-display);text-transform:uppercase
}
.sym-term-preview-card em,.sym-q-perspective-card em{
  min-height:20px;max-width:108px;border-radius:4px;background:var(--sym-topic);padding:5px 10px;
  font:500 10px/10px var(--sym-font-label);font-style:normal;letter-spacing:.5px;text-transform:uppercase;color:var(--sym-on-surface)
}
.sym-term-preview-card.is-active span{background:var(--sym-active);color:var(--sym-on-surface)}

/* relation semantic colors from the component library */
.sym-rel-chip,[data-rel]{--rel-bg:var(--sym-topic)}
.sym-rel-chip[data-rel*="dokument"],[data-rel*="dokument"],.sym-rel-chip:has(+*){ }
.sym-rel-chip{height:20px;border-radius:4px;background:var(--sym-topic);padding:5px 12px;font:500 11px/10px var(--sym-font-label);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;color:var(--sym-on-surface)}
.sym-rel-chip.is-active{outline:1px solid currentColor;outline-offset:1px}
.sym-rel-chip[data-rel="kritisiert"],em[data-rel="kritisiert"]{background:#eb5757}
.sym-rel-chip[data-rel="gehört zu"],em[data-rel="gehört zu"]{background:#f2c94c}
.sym-rel-chip[data-rel="inspiriert von"],em[data-rel="inspiriert von"]{background:#9b51e0}
.sym-rel-chip[data-rel="dokumentiert"],em[data-rel="dokumentiert"]{background:#6fcf97}
.sym-rel-chip[data-rel="ergänzt"],em[data-rel="ergänzt"]{background:#bbd86a}
.sym-rel-chip[data-rel="beantwortet"],em[data-rel="beantwortet"]{background:#56ccf2}
.sym-rel-chip[data-rel="entstand durch"],em[data-rel="entstand durch"]{background:#f2994a}
.sym-rel-chip[data-rel="verweist auf"],em[data-rel="verweist auf"]{background:#bdbdbd}

/* =========================================================
   PERSPECTIVE DETAIL
   ========================================================= */
.sym-perspective-layout{
  height:100%;min-height:0;display:grid;
  grid-template-rows:19px 55px 28px 55px auto minmax(72px,1fr) auto 52px;
  gap:8px;padding:0 0 58px;position:relative;overflow:hidden
}
.sym-perspective-layout .sym-count-row{align-self:start}
.sym-hero-term,.sym-single-term-hero{
  width:185px;height:55px;justify-self:center;border:0;border-radius:4px;background:var(--sym-terms);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:6px 12px;
  font:400 22px/22px var(--sym-font-display);text-transform:uppercase
}
.sym-rel-row{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -25px;padding:4px 25px
}
.sym-rel-row::-webkit-scrollbar{display:none}
.sym-perspective-meta,.sym-object-meta,.sym-question-meta{
  display:grid;gap:4px;font:500 11px/13px var(--sym-font-label);color:var(--sym-on-surface)
}
.sym-perspective-meta>div,.sym-object-meta>div,.sym-question-meta{display:flex;justify-content:space-between;gap:12px}
.sym-textbox,.sym-entity-textbox,.sym-question-copy,.sym-static-content{min-height:0;overflow:hidden}
.sym-scrolltext{height:100%;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;font:400 12px/15px var(--sym-font-label);color:#665c4f;scrollbar-width:thin}
.sym-scrolltext p:first-child{margin-top:0}.sym-scrolltext p:last-child{margin-bottom:0}
.sym-question-fixed{display:grid;grid-template-rows:19px 1fr;gap:6px}
.sym-perspective-question{
  min-height:48px;border:0;border-radius:4px;background:var(--sym-question);color:var(--sym-on-surface);padding:6px 12px;
  font:400 18px/18px var(--sym-font-display);text-transform:uppercase;text-align:center
}

/* =========================================================
   QUESTIONS FLOW
   ========================================================= */
.sym-question-flow{
  height:100%;display:grid;grid-template-rows:19px 78px auto minmax(90px,1fr) auto;
  gap:10px;padding:16px 0 58px;position:relative;overflow:hidden
}
.sym-question-card{
  width:237px;min-height:78px;justify-self:center;border-radius:4px;background:var(--sym-selected);
  display:flex;align-items:center;justify-content:center;padding:6px 12px
}
.sym-question-title{font:400 22px/22px var(--sym-font-display);text-align:center;color:var(--sym-on-surface);text-transform:uppercase}
.sym-question-related{display:grid;gap:8px;min-height:0}
.sym-question-perspective-strip{display:flex;gap:8px;justify-content:center;overflow-x:auto;scrollbar-width:none}
.sym-question-perspective-strip::-webkit-scrollbar{display:none}
.sym-empty{display:grid;place-items:center;min-height:80px;color:#888;font:500 11px/14px var(--sym-font-label);text-align:center}
.sym-empty-perspectives{border:1px dashed var(--sym-outline);min-height:80px}

/* =========================================================
   ENTITY DETAIL
   ========================================================= */
.sym-entity-layout{
  height:100%;min-height:0;display:grid;grid-template-rows:19px auto auto minmax(62px,1fr) auto;
  gap:8px;padding:0 0 58px;position:relative;overflow:hidden
}
.sym-entity-layout.type-term{grid-template-rows:19px minmax(80px,1fr) 55px minmax(70px,1fr) auto minmax(80px,1fr) auto}
.sym-entity-layout.type-source{grid-template-rows:19px auto auto minmax(100px,1fr) auto}
.sym-gallery{display:grid;grid-template-rows:minmax(180px,1fr) 62px;gap:8px;min-height:0;overflow:hidden}
.sym-gallery-main{width:100%;height:100%;min-height:180px;max-height:320px;object-fit:cover;border-radius:4px;display:block}
.sym-gallery-thumbs{height:62px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow:hidden}
.sym-gallery-thumbs button{border:0;border-radius:4px;padding:0;background:transparent;overflow:hidden;position:relative}
.sym-gallery-thumbs button.is-active{outline:2px solid var(--sym-artwork);outline-offset:-2px}
.sym-gallery-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.sym-entity-layout.type-person .sym-gallery{grid-template-rows:minmax(260px,1fr)}
.sym-entity-layout.type-person .sym-gallery-thumbs{display:none}
.sym-entity-layout.type-location .sym-gallery{grid-template-rows:minmax(220px,1fr)}
.sym-entity-layout.type-location .sym-gallery-thumbs{display:none}
.sym-source-title{background:#fff;border-radius:4px;padding:12px;display:grid;gap:6px;border:1px solid #f2eee8}
.sym-source-title small{font:500 10px/10px var(--sym-font-label);text-transform:uppercase;color:var(--sym-source)}
.sym-source-title strong{font:500 12px/15px var(--sym-font-label)}
.sym-consent{display:grid;grid-template-rows:auto minmax(0,1fr);gap:5px;min-height:70px;font:500 11px/13px var(--sym-font-label)}

/* =========================================================
   LOWER RELATION TABS – Figma Tabs / unten 207:22113
   ========================================================= */
.sym-footer-relations{
  position:absolute;left:0;right:0;bottom:0;
  min-height:52px;border-top:1px solid var(--sym-outline);padding-top:4px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:24px;gap:4px
}
.sym-footer-counter{
  height:24px;min-width:0;border:0;border-radius:4px;background:var(--sym-selected);padding:0 5px;
  display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;white-space:nowrap
}
.sym-footer-counter b{font:400 14px/14px var(--sym-font-display)}
.sym-footer-counter span{font:500 10px/10px var(--sym-font-label);letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis}
.sym-footer-counter.type-artwork{color:var(--sym-artwork)}
.sym-footer-counter.type-person{color:var(--sym-person)}
.sym-footer-counter.type-location{color:var(--sym-location)}
.sym-footer-counter.type-source{color:var(--sym-source)}
.sym-footer-counter.type-perspective{color:var(--sym-perspective)}
.sym-footer-counter.type-term{color:var(--sym-terms)}
.sym-footer-counter.type-question{color:var(--sym-question)}
.sym-footer-counter.is-disabled{opacity:.35;cursor:default}
.sym-footer-counter:not(.is-disabled):active{background:var(--sym-active)}

/* =========================================================
   RELATIONSHIP PANEL – opened state above lower tabs
   ========================================================= */
.sym-relation-panel{
  position:absolute;z-index:50;left:25px;right:25px;bottom:58px;max-height:235px;
  background:#fff;border-top:1px solid var(--sym-outline);padding:8px 0 4px;
  box-shadow:0 -8px 18px rgba(0,0,0,.05);overflow:hidden
}
.sym-relation-panel-head{height:26px;display:flex;align-items:center;gap:8px;padding:0 2px}
.sym-relation-panel-head strong{font:400 18px/18px var(--sym-font-display);text-transform:uppercase}
.sym-relation-panel-head span{font:400 14px/14px var(--sym-font-display);margin-left:auto}
.sym-relation-panel-head button{width:24px;height:24px;border:0;background:transparent;font-size:18px}
.sym-relation-panel-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 8px}
.sym-relation-panel-list::-webkit-scrollbar{display:none}
.sym-relation-result{flex:0 0 114px;min-height:110px;border:0;border-radius:4px;background:#f7f4ef;padding:10px;text-align:left;display:flex;flex-direction:column;gap:5px;scroll-snap-align:start}
.sym-relation-result small{font:500 10px/10px var(--sym-font-label);text-transform:uppercase}
.sym-relation-result strong{font:400 16px/17px var(--sym-font-display);text-transform:uppercase}
.sym-relation-result span{font:400 10px/13px var(--sym-font-label);color:#665c4f}
.sym-relation-result.type-artwork small{color:var(--sym-artwork)}
.sym-relation-result.type-person small{color:var(--sym-person)}
.sym-relation-result.type-location small{color:var(--sym-location)}
.sym-relation-result.type-source small{color:var(--sym-source)}
.sym-relation-result.type-perspective small{color:var(--sym-perspective)}
.sym-relation-result.type-term small{color:var(--sym-terms)}
.sym-relation-result.type-question small{color:var(--sym-question)}

/* =========================================================
   SEARCH – Figma Search pressed + Search content
   ========================================================= */
.symbiose-searchbar{display:none!important}
.sym-search-results{display:none!important}
.sym-search-overlay{
  position:absolute;z-index:80;inset:16px 25px auto 25px;max-height:calc(100% - 32px);
  background:var(--sym-artwork);border-radius:4px;padding:8px;overflow:hidden;
  box-shadow:0 1px 3px 1px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3)
}
.sym-search-overlay-head{height:32px;display:grid;grid-template-columns:12px 1fr 16px;gap:4px;align-items:center;color:#fff}
.sym-search-overlay-head input{height:24px;border:0;border-radius:4px;background:#fff;padding:4px 8px;font:500 12px/12px var(--sym-font-label);outline:none}
.sym-search-overlay-head button{height:24px;border:0;background:transparent;color:#fff;font-size:16px;padding:0}
.sym-search-overlay-results{max-height:calc(100dvh - 100px);overflow-y:auto;display:grid;gap:6px;padding-top:8px}
.sym-search-result{border:0;border-radius:4px;background:#fff;min-height:54px;padding:8px;text-align:left;display:grid;gap:2px}
.sym-search-result small{font:500 10px/10px var(--sym-font-label);text-transform:uppercase;color:var(--sym-field)}
.sym-search-result strong{font:500 12px/14px var(--sym-font-label)}
.sym-search-empty{color:#fff;padding:16px;text-align:center}

/* =========================================================
   COLLECTION / LIST
   ========================================================= */
.sym-list-screen{height:100%;display:grid;grid-template-rows:28px minmax(0,1fr) auto;gap:8px}
.sym-list-title{border-bottom:1px solid var(--sym-outline);display:flex;align-items:center;justify-content:space-between;font:400 18px/18px var(--sym-font-display);text-transform:uppercase}
.sym-list-cards{display:grid;align-content:start;gap:6px;overflow-y:auto}
.sym-list-card{border:0;border-radius:4px;background:#f7f4ef;padding:10px;text-align:left;display:grid;gap:4px}
.sym-list-card small{font:500 10px/10px var(--sym-font-label);text-transform:uppercase}
.sym-list-card strong{font:400 16px/17px var(--sym-font-display);text-transform:uppercase}
.sym-list-card span{font:400 10px/13px var(--sym-font-label)}
.sym-pager{display:flex;justify-content:center;align-items:center;gap:12px}.sym-pager button{border:0;background:transparent}

/* =========================================================
   STATIC AREA – separate header state
   ========================================================= */
.symbiose-app.is-static .symbiose-shell{grid-template-rows:40px minmax(0,1fr);gap:10px}
.symbiose-app.is-static .symbiose-tabs{display:none}
.symbiose-app.is-static .symbiose-header{display:grid;grid-template-columns:110px 1fr;width:310px}
.symbiose-app.is-static .symbiose-head-left{display:none}
.symbiose-app.is-static .symbiose-head-actions{grid-column:1;grid-row:1;justify-self:start}
.symbiose-app.is-static .symbiose-logo{width:auto}
.symbiose-app.is-static .symbiose-icon-button{display:none}
.symbiose-app.is-static .symbiose-static-brand{display:block;grid-column:2;grid-row:1;justify-self:end;text-align:right}
.symbiose-static-kicker{font:500 11px/10px var(--sym-font-label);letter-spacing:.5px;text-transform:uppercase;color:#665c4f}
.symbiose-static-title{font:400 22px/22px var(--sym-font-display);text-transform:uppercase;color:var(--sym-field)}
.sym-static-layout{height:100%;display:grid;grid-template-rows:29px 18px minmax(0,1fr) auto;gap:9px;overflow:hidden}
.sym-static-head{height:29px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--sym-outline)}
.sym-static-head button{border:0;background:transparent;border-radius:4px 4px 0 0;font:500 10px/10px var(--sym-font-label);letter-spacing:.5px;text-transform:uppercase}
.sym-static-head button.is-active{background:var(--sym-selected)}
.sym-static-date{font:500 11px/13px var(--sym-font-label)}
.sym-about-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:2px 20px 4px}
.sym-about-action{text-decoration:none;color:var(--sym-on-surface);text-align:center;display:grid;gap:5px}
.sym-about-action strong{border-radius:4px;background:var(--sym-terms);color:#fff;padding:6px 8px;font:500 10px/10px var(--sym-font-label)}
.sym-about-action span{font:400 10px/13px var(--sym-font-label)}

/* Fullscreen template and desktop preview */
@media (min-width:520px){
  .symbiose-app{height:min(844px,calc(100vh - 24px));margin:12px auto;border:1px solid #f2eee8}
}
@media (max-width:359px){
  .symbiose-shell{padding-left:16px;padding-right:16px}
  .symbiose-header{width:100%}
  .sym-relation-panel{left:16px;right:16px}
  .sym-term-grid{column-gap:7px;padding-left:4px;padding-right:4px}
}

/* 1.5 semantic counter colours */
.question-color b,.question-color i{color:var(--sym-question)}
.perspective-color b,.perspective-color i{color:var(--sym-perspective)}
.type-counter.type-artwork b,.type-counter.type-artwork i{color:var(--sym-artwork)}
.type-counter.type-person b,.type-counter.type-person i{color:var(--sym-person)}
.type-counter.type-location b,.type-counter.type-location i{color:var(--sym-location)}
.type-counter.type-source b,.type-counter.type-source i{color:var(--sym-source)}
.type-counter.type-term b,.type-counter.type-term i{color:var(--sym-terms)}
.type-counter.type-question b,.type-counter.type-question i{color:var(--sym-question)}
.sym-question-card{background:var(--sym-question)}