/* Full-height panels, in-panel navigation and a bottom-left utility dock. */
:root {
  --topbar-height: 0px;
  --page-tabs-height: 0px;
  --cc-chrome: 0px;
  --cc-dock-clearance: calc(92px + env(safe-area-inset-bottom, 0px));
}

html { scroll-padding-top: 12px; scroll-padding-bottom: var(--cc-dock-clearance); }
/* Desktop columns own their scrolling; the browser edge has no reserved gutter. */
@container game-shell (min-width: 961px) {
  html, body { height: 100%; overflow: hidden; scrollbar-gutter: auto; }
  .workspace { height: 100dvh; overflow: hidden; }
  #main, .cc-overview { height: 100%; min-height: 0; overflow: hidden; }
  .cc-overview { position: relative; grid-template-rows: minmax(0, 1fr); }
  .cc-overview > .cc-landmark, .cc-overview > .cc-feed, .cc-overview > .cc-store {
    height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    scrollbar-gutter: auto;
  }
  .cc-overview > .cc-landmark::-webkit-scrollbar, .cc-overview > .cc-feed::-webkit-scrollbar, .cc-overview > .cc-store::-webkit-scrollbar { display: none; }
  .cc-feed > * { flex-shrink: 0; }
  .cc-overview > .cc-landmark { padding-bottom: var(--cc-dock-clearance); }
}
.cc-scrollbars { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.cc-scrollbar { position: absolute; width: 7px; opacity: 0; transition: opacity .18s; pointer-events: none; }
.cc-scrollbar > i { display: block; width: 100%; border-radius: 7px; background: #899876b8; cursor: grab; touch-action: none; }
.cc-scrollbar-landmark > i { background: #9bbca1b8; }
.cc-scrollbar.is-scrolling, .cc-scrollbar.is-dragging, .cc-scrollbar:focus-visible { opacity: 1; pointer-events: auto; }
.cc-scrollbar.is-dragging > i { cursor: grabbing; }
.cc-scrollbar[hidden] { display: none; }
@container game-shell (max-width: 960px) { .cc-scrollbars { display: none; } }
#app { padding-top: 0; }
.workspace {
  margin-left: 0;
  width: 100%;
  padding-top: 0;
}

#sidebar {
  position: fixed;
  inset: auto auto calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  width: max-content;
  height: auto;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 35;
}
#sidebar .sidebar-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  min-width: 0;
  margin: 0;
  padding: 0;
}
#sidebar .header-actions { gap: 8px; }
#sidebar .header-actions .icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 5px;
  border-radius: 4px;
}
#sidebar .header-actions .icon-button > .icon { width: 32px; height: 32px; }

.cc-workspace-menu { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.cc-workspace-menu .cc-middle-tabs {
  display: grid;
  grid-template-columns: repeat(var(--cc-primary-columns, 1), minmax(0, 1fr));
  gap: 8px;
}
.cc-middle-tabs > [data-view="legacy"] { grid-column: 1 / -1; }
.cc-management-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cc-management-nav[hidden] { display: none; }
.cc-primary-management-nav { display: contents; }
.cc-management-nav .nav-item {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 6px;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
}
.cc-management-nav .nav-item > .icon { width: 16px; height: 16px; }
.cc-management-nav .nav-item.active::before { content: none; }
@container (max-width: 420px) {
  .cc-primary-management-nav .nav-item { gap: 4px; padding-inline: 2px; }
}

/* A paper ribbon sits behind the existing editable company name. */
.cc-landmark .cc-company-name {
  position: relative;
  isolation: isolate;
  width: min(100%, 280px);
  min-height: 52px;
  padding: 12px 24px;
  color: var(--cc-ink);
}
.cc-landmark .cc-company-name::before,
.cc-landmark .cc-company-name::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.cc-landmark .cc-company-name::before {
  z-index: -2;
  inset: 0;
  border-top: 1px solid #c6ac70;
  border-bottom: 1px solid #ad915c;
  background: linear-gradient(#fff7df, #e9dbb5 55%, #d8c594);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
.cc-landmark .cc-company-name::after {
  z-index: -1;
  inset: 5px 20px;
  border-top: 1px solid #b19b674d;
  border-bottom: 1px solid #b19b674d;
}
.cc-landmark .cc-company-name > .icon { color: #8a754c; }

/* Money and cash flow lead, with unlocked progression currencies below. */
.cc-landmark .cc-click-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  margin: 16px 0 0;
  text-align: center;
}
.cc-click-resources .header-resource {
  min-width: 0;
  padding: 0;
  border: 0;
}
.cc-click-resources .resource-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 5px;
  color: #b9c9ad;
  font-size: 10px;
  line-height: 1.5;
}
.cc-click-resources .resource-label > .icon { display: inline-block; width: 15px; height: 15px; }
.cc-click-resources .resource-value {
  color: #e3e8c8;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.cc-click-resources .resource-cash { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cc-click-resources .resource-cash > .icon { flex-shrink: 0; width: clamp(24px, 2.2vw, 32px); height: clamp(24px, 2.2vw, 32px); }
.cc-click-resources .resource-cash .resource-value {
  display: block;
  min-width: 0;
  color: #fff4cb;
  font-size: clamp(29px, 2.8vw, 42px);
  line-height: 1.4;
  letter-spacing: -.6px;
  text-shadow: 0 2px 3px #10292040;
}
.cc-click-resources .resource-income {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 0;
}
.cc-click-resources .resource-income .resource-label { margin: 0; }
.cc-click-resources .resource-income .resource-value { color: #d5e5bd; font-size: 17px; }
.cc-click-resources .resource-amount { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.cc-click-resources .resource-amount small { display: inline; color: #a7bba0; font-size: 10px; }
.cc-click-resources .resource-income .resource-label::after,
.cc-click-resources .resource-research .resource-label::after { content: none; }
.cc-click-resources .resource-research,
.cc-click-resources .resource-reputation {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #a7bf9a30;
}
.cc-click-resources .resource-research .resource-value { color: #eddaa6; }
.cc-click-resources .resource-reputation .resource-value { color: #d6e4bd; }
.cc-click-resources .resource-value.negative-value { color: #f2b590; }

@container game-shell (max-width: 960px) {
  .workspace { padding-bottom: var(--cc-dock-clearance); }
}

@container game-shell (max-width: 700px) {
  #sidebar {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
  }
  .cc-management-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-click-resources .resource-cash .resource-value { font-size: 37px; }
}

@container game-shell (max-width: 370px) {
  .cc-management-nav .nav-item { font-size: 10px; gap: 4px; padding: 6px 2px; }
  .cc-management-nav .nav-item > .icon { width: 13px; height: 13px; }
  .cc-click-resources .resource-cash .resource-value { font-size: 33px; }
}