:root {
  --ink: #282721;
  --muted: #6d6a61;
  --line: #d8d5cc;
  --line-strong: #c1bcae;
  --paper: #fff;
  --canvas: #f4f2ed;
  --amber: #ffcb06;
  --amber-soft: #fff3b0;
  --focus: #6b4f00;
  --radius: 4px;     /* surfaces: panels, cards */
  --radius-ctl: 3px; /* controls: buttons, inputs, chips */
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  min-width: 0;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button, input, select {
  font: inherit;
}
.dslider{
  width:280px;
}
#header {
  margin: 0;
  border-bottom: 1px solid #d9ad00;
  background-color: var(--amber);
}

.headerinner {
  display: flex;
  flex-wrap: wrap; /* lockup row, then the nav row, on narrow screens */
  align-items: center;
  row-gap: 2px;
  width: min(calc(100% - 32px), 1220px);
  min-height: 64px;
  margin: 0 auto;
  padding: 8px 0;
}

/* Trueno is the font of the beeminder.com wordmark. Self-hosted since
   beeminder.com's copy (/assets/trueno/*) sends no CORS header, which
   cross-origin font loads require. */
@font-face {
  font-family: 'Trueno';
  src: url(fonts/TruenoBd.otf) format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* The wordmark, rebuilt as bee icon plus live text so the app's name can
   ride along: BEEMINDER GRAPH EDITOR as one lockup, matching the logo
   image this replaced (letters #3a3a3c, sampled from it) */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #3a3a3c;
  text-decoration: none;
}

.beelogo { height: 42px; }

.wordmark span, .apptitle {
  font-family: Trueno, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  /* Fluid: full 1.3rem down to ~510px wide, then shrinks so the whole
     lockup still fits a 320px phone */
  font-size: clamp(1rem, 0.55rem + 2.35vw, 1.3rem);
  font-weight: bold;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.apptitle {
  margin-left: .3em; /* reads as the space in BEEMINDER GRAPH EDITOR */
  color: #3a3a3c;
}

/* Right-side header nav, echoing beeminder.com's own: small uppercase
   charcoal links, with Beeminder proper inverted into a charcoal pill so
   the way back to the mothership is the most obvious thing here */
.headnav {
  display: flex;
  flex-wrap: wrap; /* narrowest phones get the pill and links on 2 rows */
  justify-content: flex-end;
  align-items: center;
  gap: 8px 20px;
  margin-left: auto;
  padding-left: 16px;
}

.headnav a {
  color: #3a3a3c;
  font-family: Trueno, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-size: .8rem;
  font-weight: bold;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.headnav a:hover { text-decoration: underline; }

.headnav a.propernav {
  padding: 8px 14px;
  border-radius: var(--radius-ctl);
  background: #3a3a3c;
  color: var(--amber);
}

/***** Common Element styles *****/

button.bmdrbtn, select {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background-color: #f8f7f4;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease;
}

button.bmdrbtn:hover {
  border-color: #b49000;
  background-color: var(--amber-soft);
}

button.bmdrbtn.active {
  border-color: #d0a600;
  background-color: var(--amber-soft);
}

:where(button, input, select, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--amber);
  vertical-align: middle;
  cursor: pointer;
}

label {
  vertical-align: middle;
  font-size: .9375rem;
  cursor: pointer;
}

.tooltitle {
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.etabcontent > .tooltitle:first-child,
.gtabcontent > .tooltitle:first-child,
.stabcontent > .tooltitle:first-child {
  margin-top: 0;
}



/***** MAIN TABS AND CONTAINERS *****/
/* Horizontal container for main tabs */
.app-shell {
  width: min(calc(100% - 32px), 1220px);
  margin: 20px auto 48px;
}

/* Loud strip above the goalbar when the URL asked for something we
   can't show (someone else's goal, or a goal that doesn't exist) */
.urlbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid #d43f3f;
  border-radius: var(--radius);
  background: #fdf0f0;
  color: #8f1f1f;
}

.urlbanner span { flex: 1; }

/* The display:flex above beats the browser's [hidden]{display:none}
   (author rules outrank the UA sheet), so restate it or the banner shows
   as an empty red strip on every page */
.urlbanner[hidden] { display: none; }

.goalbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

/* While a goal loads, the numbers still on screen are the old goal's:
   gray them out and stop taking clicks until the swap completes */
.goalloading .summary.inbar,
.goalloading .vtabcontainer,
.goalloading .graphcontainer .graphtools {
  opacity: .35;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* The summary rides in the goalbar between the picker and the mode
   switch: no panel chrome of its own, and it flexes to fill the middle */
.summary.inbar {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* username/, then the goalname dropdown, reading as one yoog */
.goalpicker {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  max-width: 34em;
}

.yooguser {
  flex: 0 0 auto;
  font-weight: 700;
}

/* The view/edit mode switch lives at the right end of the goalbar and
   shares the amber-underline active language with the tool tabs */
.modeswitch {
  display: inline-flex;
  gap: 8px;
  overflow: visible;
  border: none;
}


.modeswitch button.bmdrbtn {
  min-width: 72px;
  min-height: 42px;
  padding: 8px 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
}

.modeswitch button.bmdrbtn.active {
  /* Longhands only: a border-color shorthand holding var() fails to
     cascade over other rules' longhands in Chromium */
  border-top-color: var(--line-strong);
  border-left-color: var(--line-strong);
  border-right-color: var(--line-strong);
  border-bottom-color: var(--amber);
  background: var(--paper);
  color: var(--ink);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 18px 0 0;
}

#graph, #entry, #eroad, #sedit {
  display: block;
}

/* Footer: beeminder.com's visual language -- charcoal band, amber
   uppercase links, amber baseboard -- leading with the escape hatch to
   Beeminder proper so nobody mistakes this satellite for the mothership */
.pagefoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 16px 22px;
  border-bottom: 6px solid var(--amber);
  background: #3a3a3c; /* the wordmark charcoal */
  font-size: .875rem;
}

.pagefoot a {
  color: var(--amber);
  font-family: Trueno, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-weight: bold;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.pagefoot a:hover { text-decoration: underline; }

.pagefoot .primefoot { font-size: 1rem; }

.footlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.pagefoot .versiontag {
  opacity: .55;
  color: #fff;
  font-size: .75rem;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 696px) minmax(360px, 1fr);
  gap: 20px;
  align-items: start;
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.etabcontent, .gtabcontent, .stabcontent {
  display: none;
  position: static;
  width: 100%;
  min-height: 360px;
  margin: 0;
  padding: 18px;
  overflow-x: auto;
}

.graphcontainer {
  position: relative; /* anchors the corner help chip */
  width: 100%;
  max-width: none;
  padding: 12px;
  display: block;
  overflow: hidden;
  /* vertical-align:top; -- ignored with display:block apparently */
}
.graphtools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 4px;
  font-size: .875rem;
}

.graphcontainer > .graphtools {
  border-top: 1px solid var(--line);
}

.graphcontainer > br,
.graphcontainer > hr {
  display: none;
}

.graphcontainer > details {
  padding: 12px 4px 4px;
  border-top: 1px solid var(--line);
}

.graphcontainer > details > summary {
  padding: 2px 0;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 650;
  cursor: pointer;
}

.graphcontainer > details .graphtools {
  padding: 10px 0 0;
}

/* A checkbox and its label move as one unit when toolbars wrap */
.checkpair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Usage hint: a help chip floating in the panel corner; the text opens
   as a popup so nothing reflows */
details.hint {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 0;
  border-top: none;
  color: var(--muted);
  font-size: .875rem;
}

details.hint > .hintpop {
  position: absolute;
  top: 30px;
  right: 0;
  width: min(320px, 80vw);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(45, 42, 34, .18);
}

details.hint > .hintpop > ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

details.hint > .hintpop li {
  margin: 4px 0;
}

details.hint > summary,
details.gchip > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background: #f8f7f4;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
  -webkit-user-select: none; /* clicking the chip shouldn't select its glyph */
  user-select: none;
}

details.hint > summary::-webkit-details-marker,
details.gchip > summary::-webkit-details-marker {
  display: none;
}

details.hint > summary:hover,
details.gchip > summary:hover {
  border-color: #b49000;
  background: var(--amber-soft);
}

/* Corner chips over the graph, generalizing the help chip: the camera
   chip (screenshot kit) and magnifier chip (zoom resets) stack in the
   top-left corner and open inward as popovers */
details.gchip {
  position: absolute;
  z-index: 2;
  padding: 0;
  border-top: none;
  color: var(--muted);
  font-size: .875rem;
}

details.gchip.shot { top: 10px; left: 10px; }

/* The magnifier chip sits in the graph's lower-right corner, by the
   on-graph zoom buttons, and its popover opens upward. The .graphbox
   wrapper anchors it to the graph itself rather than the whole panel. */
.graphbox { position: relative; }

details.gchip.zoom { right: 8px; bottom: 8px; }

details.gchip.zoom > .chippop {
  top: auto;
  bottom: 30px;
  left: auto;
  right: 0;
}

/* An open chip's popover paints over its sibling chip */
details.gchip[open] { z-index: 3; }

details.gchip > summary {
  font-size: .8rem;
  filter: grayscale(1); /* mute the emoji glyphs to match the ? chip */
}

details.gchip > .chippop {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(45, 42, 34, .18);
}

/* Icon-sized undo/redo buttons, each with a whisper of a buffer count
   tucked in its top-right corner */
.bmdrbtn.iconbtn {
  position: relative;
  min-width: 36px;
  padding: 6px 8px;
  line-height: 1;
}

.bmdrbtn.iconbtn .uicon {
  display: block; /* no baseline gap under the inline svg */
}

.ucnt {
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--muted);
  font-size: .6rem;
  line-height: 1;
  opacity: .65;
}

/* Flush the marked control to the row's right edge */
.graphtools > .pushright { margin-left: auto; }

#roadgraph, #roadeditor, #roadsandbox {
  width: 100%;
  margin: 0;
  vertical-align: top;
}
/***** VERTICAL SECONDARY TABS *****/
.vtab {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  padding: 0 12px;
  white-space: nowrap;
  overflow: visible;
  border-bottom: 1px solid var(--line);
}

.vtab button.bmdrbtn {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 43px;
  padding: 10px 5px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: .8125rem;
}

.vtab button.bmdrbtn:hover {
  background: #faf7eb;
}

.vtab button.bmdrbtn.active {
  border-bottom-color: var(--amber);
  background: #fffaf0;
  color: var(--ink);
  box-shadow: none;
}

.vtabtitle {
  padding: 16px 18px 11px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.vtabcontainer {
  width: 100%;
  height: auto;
  overflow: hidden;
  vertical-align: top;
}

/***** Misc components *****/

/* Due-by table: hairline rows, right-aligned tabular numbers */
.duebytable {
  display: table;
}

.duebytable .dbhdrcell {
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.duebytable .dbcell {
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}

.duebytable .dbrow + .dbrow .dbcell {
  border-top: 1px solid var(--line);
}

.duebytable .dbhdrcell:nth-child(n+2),
.duebytable .dbcell:nth-child(n+2) {
  padding-left: 18px;
  text-align: right;
}

/* Progress indicators */
.progrow { display: table-row; }
.proghdr {
  display: table-cell;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 15px 4px 4px;
}
.progcell { display: table-cell; }
.progcont {
  width: min(300px, 100%);
  height: 12px;
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background: #eceae5;
}
.progbar { 
  height:100%; 
  background-color: var(--amber);
  transition: width 0.3s ease; 
}

/* Top summary line and components */
.summary {
  min-height: 54px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.baremin,.doom-modifier,.doom,.pledgepre,.pledge {
  display: inline-block;
  margin: 0 4px;
  font-size: 1.125rem;
}

.baremin,.doom, .pledge {
  padding: 4px 8px;
  border-radius: var(--radius-ctl);
  background-color: #3b3b3b;
  color: var(--amber);
}
.doom {
  color: white;
}

/* Submission result for the editor */
#submitmsg {
  margin-left: 4px;
  color: #8a4029;
  font-size: .8125rem;
}

button.primary-action {
  border-color: #c99f00;
  background: var(--amber);
  color: var(--ink);
  font-weight: 750;
}

button.primary-action:hover {
  border-color: #9f7e00;
  background: #f2c000;
}

button.bmdrbtn:disabled {
  border-color: #dedbd3;
  background: #f0efec;
  color: #99968e;
  cursor: not-allowed;
}

/* New data entry form */
.entryform {
  padding: 0;
}

.dateentry, .valueentry, .cmtentry, .toolinput {
  width: 100%;
  max-width: 250px;
  min-height: 38px;
  margin: 4px 0 9px;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
}

.dateentry:focus, .valueentry:focus, .cmtentry:focus, .toolinput:focus {
  border-color: #ba9400;
  box-shadow: 0 0 0 2px rgba(255, 217, 73, 0.2);
}

.rateinput {
  width: 10em;
}

.daysinput {
  width: 5em;
}

.inlinecontrol {
  margin: 4px;
}

@media (max-width: 1040px) {
  .app-shell,
  .headerinner {
    width: calc(100% - 20px);
  }

  .goalbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .workspace {
    grid-template-columns: minmax(0, 696px);
    gap: 20px;
  }

  .graphcontainer {
    padding: 4px;
  }

  .summary {
    padding: 9px 10px;
  }

  .baremin,.doom-modifier,.doom,.pledgepre,.pledge {
    margin: 2px;
    font-size: 1rem;
  }

  .etabcontent, .gtabcontent, .stabcontent {
    min-height: 0;
    padding: 14px;
  }

  .vtab {
    padding: 0 4px;
  }
}

.ts-control.roadselect {
  display: inline-block;
  flex: 1; /* fill the .goalpicker wrapper, which caps the width */
  min-height: 40px;
  border-radius: var(--radius-ctl);
  font-size: 1rem;
}

/* Increase font size for dropdown options (HT Codebuff) */
.ts-dropdown .ts-dropdown-content .ts-option {
  font-size: 16px;
  padding: 8px 10px;
}

/* Also increase font size for the control input (HT Codebuff) */
.ts-control.roadselect .ts-input {
  font-size: 16px;
}

/* Stuff below is all from Codebuff */

/* Improve form styling */
input[type="number"],
input[type="text"],
select {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input[type="number"]:hover,
input[type="text"]:hover,
select:hover { border-color: #bbb; }

hr {
  border: 0;
}

/* Tooltips via data-tip: styled bubbles that also appear on keyboard
   focus, and on press-and-hold where hover doesn't exist */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 8px;
  border-radius: var(--radius-ctl);
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transition-delay: 350ms;
}

@media (hover: none) {
  [data-tip]:active::after {
    opacity: 1;
    transition-delay: 350ms;
  }
}

/* Graph matrix and data table: design-system borders and buttons
   instead of jsbrain.css's hard black defaults */
.vtabcontainer .rdcell,
.vtabcontainer div.dcell,
.vtabcontainer span.dcell {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background-color: var(--paper);
}

.vtabcontainer .rdhdrcell,
.vtabcontainer .dhdrcell {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}

.vtabcontainer .rtbgoal {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: #eef5e3;
}

.vtabcontainer button.rdbtn,
.vtabcontainer button.dcell {
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background-color: #f8f7f4;
  cursor: pointer;
}

.vtabcontainer button.rdbtn:hover,
.vtabcontainer button.dcell:hover {
  border-color: #b49000;
  background-color: var(--amber-soft);
}

.vtabcontainer .dcell.cmt,
.vtabcontainer .dhdrcell.cmt {
  max-width: 160px;
}

/* Knots (the draggable vertical lines) show a left/right arrow cursor on hover 
   and the Dots (the draggable disks that sit on knots) show an up/down arrow 
   cursor on hover */
.knots:hover { cursor: ew-resize; }
.dots:hover  { cursor: ns-resize; }