/* =========================================================================
   WRITESTYLE.CSS — writer/editor + dashboard styles.
   Restyled to the styleguide token system. Appearance only; selectors,
   sizes, and JS hooks preserved from the original. Dark theme flips
   automatically via the .darkTheme token overrides in css/basic_dark.css.
   Loaded by: write app, a/, p/ (after css/basic*.css).
   ========================================================================= */

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
body{
  font-family:var(--font-display);
  letter-spacing:.03rem;
  margin:0;
  padding:0;
  background-color:var(--panel);
  color:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
a{color:var(--ink);text-decoration:none !important}
a:hover{text-decoration:none}
.themeToggleLink{
  display:inline-flex;align-items:center;
  cursor:pointer;opacity:.5;color:var(--ink);
}
.themeToggleLink:hover{opacity:.8}
.themeToggleLink svg{width:20px;height:20px;fill:currentColor}
span{tab-size:5}
h3{margin:3px}
hr{
  display:block;
  height:2px;
  border:0;
  border-top:2px dashed var(--ink-line);
  padding:0;
}

/* -------------------------------------------------------------------------
   FIXED TOP TOOLBAR
   ------------------------------------------------------------------------- */
.writeMenu{
  position:fixed;
  top:0;
  padding:0;
  width:600px;
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  border-bottom:1px solid var(--ink-line);
  box-shadow:var(--shadow-sm);
}

/* -------------------------------------------------------------------------
   EDITOR SURFACE
   ------------------------------------------------------------------------- */
#editor{
  border:1px dashed var(--border-muted);
  min-height:200px;
  /*max-width:585px;*/
  padding:10px;
  padding-top:30px;
  margin-bottom:20px;
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:12pt;
  background:var(--input-bg);
  color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
#editor:hover{border:1px dashed var(--ink)}
#editor:focus{
  border:1px dashed var(--ink);
  outline:none;
  box-shadow:var(--shadow-accent);
}

/* -------------------------------------------------------------------------
   BUTTONS / CONTROLS  — original sizes preserved, colors tokenized
   ------------------------------------------------------------------------- */
.toggleMenu{
  font-family:var(--font-display);
  font-size:24px;
  padding:7px;
  margin-left: 8px;
  width:120px;
  border-radius:var(--r-sm);
  background-color:var(--ink);
  color:var(--panel);
  border:none;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.toggleMenu:hover{background-color:var(--accent);color:var(--ink)}

.imgButton{
  width:42px;
  background-color:var(--ink);
  margin:4px 2px;
  cursor:pointer;
  border-radius:var(--r-sm);
  padding-left:4px;
  padding-right:4px;
  vertical-align:top;
  stroke:var(--panel);
  border:none;
  transition:background .12s,stroke .12s;
}
.imgButton:hover{
  background-color:var(--accent);
  stroke:var(--ink);
}

#saveButton{
  background-color:var(--good);
  color:var(--white);
  stroke:var(--white);
}
#saveButton:hover{
  background-color:var(--good);
  stroke:var(--ink);
  filter:brightness(1.08);
}

.dragdrop{
  font-size:20pt;
  border-radius:var(--r-sm);
  border:1px dashed var(--ink);
  padding:10px;
  color:var(--ink);
  background:var(--tint-drag);
}

.Menu{
  position:absolute;
  z-index:10;
  box-shadow:var(--shadow-md);
  border-radius:var(--r-md);
  padding:10px;
  border:1px dashed var(--ink);
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
}

select::-webkit-scrollbar{display:none}

Select{
  height:40px;
  -webkit-appearance:none;
  appearance:none;
  overflow:hidden;
  vertical-align:top;
  background-color:var(--ink);
  /*background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23d9b997' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");*/
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  color:var(--panel);
  border:none;
  padding:8px 32px 8px 16px;
  width:142px;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  font-size:16px;
  font-family:var(--font-display);
  margin:4px 2px;
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .12s,color .12s;
}
Select:hover{
  background-color:var(--accent);
  color:var(--ink);
}

button{
  font-family:var(--font-display);
  background-color:var(--ink);
  color:var(--panel);
  border:none;
  padding:8px 14px;
  text-align:center;
  text-decoration:none !important;
  display:inline-block;
  font-size:24px;
  margin:4px 2px;
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .12s,color .12s;
}
button:hover{
  background-color:var(--accent);
  color:var(--ink);
}

input[type=file]{
  font-family:var(--font-display);
  background-color:var(--ink);
  color:var(--panel);
  border:none;
  padding:8px 14px;
  text-align:center;
  text-decoration:none !important;
  display:inline-block;
  font-size:24px;
  margin:4px 2px;
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .12s,color .12s;
}
input[type=file]:hover{
  background-color:var(--accent);
  color:var(--ink);
}

/* -------------------------------------------------------------------------
   NOTE REFERENCES / COLLAPSE — original dimensions & fill preserved
   ------------------------------------------------------------------------- */
span[nid]{
  color:var(--ink);
  cursor:pointer;
}
span[nid]:hover{
  color:var(--accent-strong);
}

.collapseArrow{
  display:inline-block;
  height:40px;
  width:40px;
  stroke:var(--ink);
  fill:var(--panel);
  stroke-width:14px;
  cursor:pointer;
  transition:rotate .4s ease;
  margin-bottom:15px;
}
.collapseArrow:hover{
  stroke:var(--accent);
  fill:var(--accent);
}

.categoryFilter{
  width:30%;
  margin-left:15px;
}

.highlightDiv{
  padding:8px;
  border-radius:var(--r-sm);
  transition:background .1s;
}
.highlightDiv:hover{
  background-color:var(--tint-row);
}

.listCard,
.NamesListContainer{
  border:1px dashed var(--ink-line);
  border-radius:var(--r-md);
}
.listHead{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--tint-bar);
  border-bottom:1px solid var(--ink-line);
}
.listRow,
.dashboardListRow{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-height:44px;
  padding:var(--s-3) var(--s-4);
  border-bottom:1px dotted var(--ink-line);
  color:var(--ink);
  cursor:default;
  transition:background .1s;
}
.listRow:last-child,
.dashboardListRow:last-child{border-bottom:none}
.dashboardListRow > form{display:none}
.listRow:hover,
.dashboardListRow:hover{background:var(--tint-row)}
.listRow .name,
.dashboardListRow .name{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-ui);
  font-weight:bold;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.listRow .meta,
.dashboardListRow .meta{
  flex:0 1 220px;
  min-width:90px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:12px;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.listRow .actions,
.dashboardListRow .actions{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dashboardListLink{
  color:var(--ink) !important;
  text-decoration:none !important;
}
.dashboardListLink:hover{text-decoration:underline !important}
.sortBtn,
.dashboardIconButton{
  width:40px;
  height:38px;
  min-width:40px;
  padding:0 !important;
  margin:0;
  border:1px dotted var(--ink-line);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink) !important;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  float:none !important;
  transition:background .12s,border-color .12s,color .12s;
}
.sortBtn:hover,
.dashboardIconButton:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink) !important;
}
.sortBtn svg,
.dashboardIconButton svg,
.dashboardIconButton .xButton{
  width:24px !important;
  height:24px !important;
  position:static !important;
  bottom:auto !important;
  float:none !important;
  display:block;
  fill:currentColor;
  stroke:currentColor;
}
.dashboardIconButton svg path{stroke:currentColor}
.dashboardDetailsIcon svg path{fill:currentColor;stroke:currentColor}
.dashboardListDescription{display:block;padding:0;font-size:12px;font-family:var(--font-mono);color:var(--ink-soft)}
.tip{position:relative}
.tip::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--panel);
  font-family:var(--font-ui);
  font-size:11px;
  white-space:nowrap;
  padding:4px 8px;
  border-radius:var(--r-sm);
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
  z-index:50;
}
.tip:hover::after,
.tip:focus-visible::after{opacity:1}

.sortArrow,
.sortSvg{
  display:inline;
  float:right;
  text-align:center;
  padding:16px;
  font-size:28px;
  fill:var(--ink);
  height:40px;
  width:40px;
  cursor:pointer;
  stroke:var(--ink);
  transition:fill .12s,stroke .12s;
}
.sortArrow:hover,
.sortSvg:hover{
  fill:var(--accent);
  stroke:var(--accent);
}

.collapseBorder{
  border-bottom:4px solid transparent;
}

.CollapseInterior{
  transition:height .4s ease;
}

.collapseHeading{
  display:inline-block;
  text-align:center;
  vertical-align:top;
  margin-left:10px;
  margin-top:10px;
}

.menuClose{
  stroke:var(--ink);
  float:right;
  cursor:pointer;
  padding:5px;
  border-radius:var(--r-sm);
  transition:stroke .12s;
}
.menuClose:hover{
  stroke:var(--accent);
}

.noteName{
  width:48% !important;
}

.dashboardCreateNoteForm{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin:0 0 var(--s-3);
  min-height:40px;
}
.dashboardCreateNoteForm .noteName{
  flex:1 1 260px;
  width:auto !important;
  margin:0;
}
.dashboardCategorySelect{
  flex:0 0 145px;
  width:145px;
  height:34px;
  margin:0;
  text-align:left;
  vertical-align:middle;
}
.dashboardCreateNoteButton{
  flex:0 0 130px;
  width:130px !important;
  margin:0;
  float:none;
  white-space:nowrap;
}

.dashboardFilterBar{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--tint-bar);
  border-bottom:1px dotted var(--ink-line);
}
.dashboardFilterLabel{
  flex:0 0 auto;
  margin:0 var(--s-2) 0 0;
  height:auto;
}
.dashboardSortSelect{
  width:145px;
  height:34px;
  margin:0;
  text-align:left;
}
.dashboardSearchInput{
  flex:1 1 180px;
  width:auto !important;
  min-width:130px;
  margin:0;
}
.dashboardFilterBar .sortBtn{
  flex:0 0 40px;
}

/* -------------------------------------------------------------------------
   EXPORT
   ------------------------------------------------------------------------- */
#exportMenu{
  display:none;
  position:absolute;
  z-index:10;
  box-shadow:var(--shadow-md);
  border-radius:var(--r-md);
  padding:10px;
  border:1px dashed var(--ink-line);
  font-size:22px;
  font-family:'Cutive Mono';
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
}

#exportBookMenu{
    display:none;
  position:absolute;
  z-index:10;
  box-shadow:var(--shadow-md);
  border-radius:var(--r-md);
  padding:10px;
  border:1px dashed var(--ink-line);
  font-size:22px;
  font-family:'Cutive Mono';
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
}

.exportLabel{
  cursor:pointer;
  display:inline-block;
  background-color:var(--panel);
  color:var(--ink);
  font-size:16px;
  margin:6px 2px;
  border-radius:var(--r-sm);
  padding:4px 8px;
  transition:background .12s,color .12s;
}
.exportLabel:hover{
  color:var(--accent);
  background:var(--tint-row);
}

#export{
  fill:var(--ink);
  cursor:pointer;
  width:40px;
  height:48px;
  vertical-align:middle;
  display:inline-block;
  transition:fill .12s;
}
#export:hover{
  fill:var(--accent);
  stroke:var(--panel);
  cursor:pointer;
}

#exportProject{
  fill:var(--ink);
  cursor:pointer;
  display:inline-block;
  transition:fill .12s;
}
#exportProject:hover{
  fill:var(--accent);
}

#exportProjectMenu{
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  color:var(--ink);
}

#exportProjectMenu .exportLabel{
  cursor:pointer;
  display:inline-block;
  background-color:var(--panel);
  color:var(--ink);
  font-size:16px;
  margin:6px 2px;
  border-radius:var(--r-sm);
  padding:4px 8px;
}
#exportProjectMenu .exportLabel:hover{
  color:var(--accent);
  background:var(--tint-row);
}

/* -------------------------------------------------------------------------
   TOOLBAR / HEADINGS / PARAGRAPHS
   ------------------------------------------------------------------------- */
.toolbar{
  background-color:var(--panel-2);
  position:relative;
  width:100%;
  max-width:600px;
  margin-bottom:10px;
  min-height:50px;
  display:inline-block;
  /*border:1px solid var(--ink-line);*/
  border-radius:var(--r-md);
  padding:6px 10px;
}

.heading{
  font-family:var(--font-display);
  font-size:22px;
  height:30px;
  font-weight:bold;
  margin-top:10px;
  margin-left: 8px;
  color:var(--ink);
}

p{
  text-indent:34px;
  margin:0 0 10px 0;
}

/* -------------------------------------------------------------------------
   FONTS
   ------------------------------------------------------------------------- */
@font-face{font-family:'Lexend';src:url('font/Lexend/Lexend-VariableFont_wght.ttf') format('truetype');font-weight:normal;font-style:normal}
@font-face{font-family:'Cutive Mono';src:url('font/Cutive_Mono/CutiveMono-Regular.ttf') format('truetype');font-weight:bold;font-style:normal}
@font-face{font-family:'Bona Nova Bold';src:url('font/Bona_Nova/BonaNova-Bold.ttf') format('truetype');font-weight:normal}
@font-face{font-family:'Bona Nova';src:url('font/Bona_Nova/BonaNova-Regular.ttf') format('truetype');font-weight:normal}
@font-face{font-family:'Bona Nova Italic';src:url('font/Bona_Nova/BonaNova-Italic.ttf') format('truetype');font-weight:normal;font-style:italic}
@font-face{font-family:'Medula One';src:url('font/Medula_One/MedulaOne-Regular.ttf') format('truetype');font-weight:normal;font-style:normal}

.MedulaOne{font-family:'Medula One'}
.BonaNova{font-family:'Bona Nova'}
.CutiveMono{font-family:'Cutive Mono'}
.Lexend{font-family:'Lexend'}
.TimesNewRoman{font-family:'Times New Roman',Times,serif}

/* -------------------------------------------------------------------------
   LAYOUT UTILITIES (theme-agnostic — identical to original)
   ------------------------------------------------------------------------- */
.mainContainer,
#main{margin:auto;max-width:600px;padding:2px 0}

#usracc{
  display:flex;
  align-items:center;
  margin-top:4px;
  height:40px;
  cursor:pointer;
  background-color:var(--ink);
  color:var(--panel);
  border-radius:var(--r-sm);
  font-size:24px;
  transition:background .12s,color .12s;
}
#usracc:hover{background-color:var(--accent);color:var(--ink)}
#usracc > div:first-child{display:inline-block;margin-right:10px;margin-left:20px}
#usracc > div:last-child{display:inline-block;margin-right:17px;width:50px}
#usracc svg{fill:var(--panel)}

#selectNamesList,
.selectNamesList{
  display:none;
  background-color:var(--ink);
  color:var(--panel);
  position:fixed;
  padding:8px;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);
}

#editor{
  min-height:400px;
  margin-top:360px;
  font-family:'Bona Nova';
  font-size:12pt;
}

#errMessage{
  display:none;
  position:absolute;
  z-index:100;
  color:var(--danger);
  font-family:var(--font-ui);
  font-size:14px;
}

.dashboardLink{text-decoration:none}
.hideMenuButton{display:inline;cursor:pointer}
.dashboardHeader{display:inline}

.spacer{height:200px}
.smallSpacer{height:60px}
.mediumSpacer{height:80px}
.largeSpacer{height:40px}

.fullWidth{width:100%}
.ninetyWidth{width:90%}
.ninetyFiveWidth{width:95%}
.centerBlock{margin-left:auto;margin-right:auto}
.dialogButtonWrapper{width:80%;margin:auto}
.inlineBlock{display:inline-block}
.textIndentNone{text-indent:0}

/* theme toggle */
.themeToggleLink{
  display:inline-flex;align-items:center;
  cursor:pointer;opacity:.5;color:var(--ink);
}
.themeToggleLink:hover{opacity:.8}
.themeToggleLink svg{width:20px;height:20px;fill:currentColor}
#moonIcon{display:block}#sunIcon{display:none}
.darkTheme #moonIcon{display:none}
.darkTheme #sunIcon{display:block}

.publicView{background-color:transparent;min-height:98vh}
.publicHeader{padding-left:40px;padding-top:40px}
.publicEditor{border-color:transparent;background-color:transparent;margin-top:0}

/* -------------------------------------------------------------------------
   COMPARISON DIALOG
   ------------------------------------------------------------------------- */
#comparisonWrapper{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:var(--backdrop);
  z-index:1000;
  display:none;
  overflow-y:auto;
}
#comparisonContainer{
  max-width:900px;
  margin:60px auto;
  padding:24px;
  background:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  border:1px dashed var(--ink-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  color:var(--ink);
}
.comparisonHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:2px dashed var(--ink-line);
}
.comparisonHeader h2{
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:28px;
  letter-spacing:.04rem;
}
.comparisonTabs{
  display:flex;
  border-bottom:2px dashed var(--ink-line);
  background:transparent;
  margin-bottom:20px;
}
.comparisonTab{
  flex:1;
  padding:10px 12px;
  background:transparent;
  border:none;
  border-right:1px dashed var(--ink-line);
  border-bottom:3px solid transparent;
  color:var(--ink);
  font-size:22px;
  cursor:pointer;
  transition:background .12s,color .12s;
  font-family:var(--font-display);
}
.comparisonTab:last-child{border-right:none}
.comparisonTab:hover{background:var(--tint-tabh)}
.comparisonTab.active{
  border-bottom-color:var(--accent);
  background:var(--tint-taba);
}
.comparisonDisplay{
  background:var(--input-bg);
  border:1px dashed var(--border-muted);
  border-radius:var(--r-sm);
  padding:20px;
  line-height:1.9;
  white-space:pre-wrap;
  word-wrap:break-word;
  font-size:15px;
  color:var(--ink);
  min-height:200px;
  max-height:500px;
  overflow-y:auto;
  font-family:var(--font-body);
}
.comparisonDisplay::-webkit-scrollbar{width:6px}
.comparisonDisplay::-webkit-scrollbar-track{background:transparent}
.comparisonDisplay::-webkit-scrollbar-thumb{background:var(--border-muted);border-radius:3px}
.comparisonDisplay .highlight{
  background-color:var(--highlight-ins);
  color:var(--ink);
  padding:0 3px;
  font-weight:bold;
  border-bottom:2px solid var(--good);
}
.comparisonDisplay .unchanged{color:var(--ink)}

/* -------------------------------------------------------------------------
   CONFIRM DIALOG
   ------------------------------------------------------------------------- */
#confirmDialog{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:var(--backdrop);
  z-index:1001;
  display:none;
  justify-content:center;
  align-items:center;
}
#confirmDialogContent{
  background:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  border:1px dashed var(--ink-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:24px;
  max-width:420px;
  text-align:center;
}
#confirmDialogContent p{
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  margin:0 0 20px 0;
  text-indent:0;
}
.dialogButton{
  background:var(--ink);
  color:var(--panel);
  border:none;
  padding:8px 14px;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:22px;
  margin:0 8px;
  border-radius:var(--r-sm);
  min-width:80px;
  transition:background .12s,color .12s;
}
.dialogButton:hover{background:var(--accent);color:var(--ink)}
.dialogButton.cancel{
  background:var(--panel-2);
  color:var(--ink);
  border:1px dashed var(--ink-line);
}
.dialogButton.cancel:hover{background:var(--tint-row);color:var(--ink)}
.dialogButtonApply{float:left}
.dialogButtonCancel{float:right}

#compareToggleBtn,
#closeComparisonBtn,
#applyChangesBtn{
  background:var(--panel-2);
  color:var(--ink);
  border:1px solid var(--ink-line);
  padding:8px 14px;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:22px;
  border-radius:var(--r-sm);
  transition:background .12s,color .12s,border-color .12s;
}
#compareToggleBtn:hover,
#closeComparisonBtn:hover,
#applyChangesBtn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
#applyChangesBtn{margin-right:10px}
#compareToggleBtn{margin-left:10px}

/* -------------------------------------------------------------------------
   DASHBOARD UTILITIES
   ------------------------------------------------------------------------- */
.dashContent{}
.fullWidthContainer{width:98vw}
.formNoMargin{margin:0}
.formSmallMargin{margin:10px 0}
.formNoMarginTop{margin-top:0}
.fixedPosition{position:fixed}
.fixedTopLeft{position:fixed;top:0;left:0}
.blackout{
  display:none;
  position:fixed;
  width:100vw;
  height:100vh;
  background-color:var(--backdrop);
  left:0;top:0;
}
.contentPadding{padding:20px 0}
.contentCenter{margin:auto;max-width:600px;padding:20px 0}
.xButtonSmall{width:25px}

.hatIcon{stroke:currentColor;fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
.hatIcon:hover{stroke:var(--accent)}

.hatPopup{
  max-width:320px;
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  padding:10px;
  border-radius:var(--r-md);
  border:1px dashed var(--ink-line);
  position:absolute;
  left:calc(50% - 150px);
  top:10%;
  font-family:var(--font-ui);
  box-shadow:var(--shadow-md);
}
.accountPopup{
  max-width:400px;
  width:90%;
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  padding:10px 0;
  border-radius:var(--r-lg);
  border:1px dashed var(--ink-line);
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-ui);
  box-shadow:var(--shadow-lg);
}
.byteLimitPopup{
  max-width:400px;
  width:90%;
  background-color:var(--panel);
  background-image:var(--panel-bg-image);
  background-size:var(--panel-bg-size);
  padding:10px;
  border-radius:var(--r-lg);
  border:1px dashed var(--ink-line);
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-ui);
  box-shadow:var(--shadow-lg);
}
.accountTypeBadge{
  display:inline-block;
  background-color:var(--ink);
  color:var(--panel);
  padding:4px 18px;
  border-radius:var(--r-pill);
  font-size:16px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
}
.progressContainer{margin-bottom:12px;text-align:left}
.progressLabel{font-size:14px;font-weight:bold;margin-bottom:2px;font-family:var(--font-ui)}
.progressStatus{font-size:12px;opacity:.7;margin-bottom:4px;font-family:var(--font-ui)}
.progressTrack{
  width:100%;
  height:10px;
  background-color:var(--panel-3);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.progressFill{
  height:100%;
  background-color:var(--ink);
  border-radius:var(--r-pill);
  transition:width .4s ease;
}
.progressFill.progressComplete{background-color:var(--good)}

.headingMarginTop{margin-top:10px}
.headingMarginBottom{margin-bottom:20px}
.buttonHalfWidth{width:50%}
.buttonFullWidth{width:100%}
.textAreaLarge{min-height:100px;width:100%}
.textAreaXLarge{min-height:320px;width:100%}
.textAreaSmall{min-height:100px}
.selectHalfWidth{width:50%}
.selectFullWidth{width:100%}
.selectVerticalAlign{vertical-align:middle}
.redText{color:var(--danger)}
.deleteText{color:var(--danger) !important}
.floatRight{float:right}
.blockDisplay{display:block}
.noFloat{float:none}
.overflowHidden{overflow:hidden}
.itemHeightSmall{height:35px}
.itemHeightMedium{height:40px}
.itemHeightLarge{height:60px}
.boldText{font-weight:bold}
.monoFont{font-family:'Cutive Mono',monospace}
.noDescription{display:block;padding:6px;font-size:14px;font-family:'Cutive Mono',monospace}
.descriptionText{display:block;padding:6px;font-size:14px;font-family:'Cutive Mono',monospace}
.sortLabel{display:inline-block;padding:12px 30px}
.searchInput{margin:15px 5px}
.dashedLine{border:0;border-bottom:1px dotted var(--ink-line)}
.listSortSelect{margin:15px 5px}

.buttonPrimary{background-color:var(--ink);color:var(--panel)}
.buttonDanger{color:var(--danger) !important}

/* -------------------------------------------------------------------------
   DASHBOARD HEADER LAYOUT
   ------------------------------------------------------------------------- */
.dashboardPage{
  margin:auto;
  max-width:600px;
  padding:20px 2px;
}

.dashboardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:10px;
}

.dashboardHeader h1{
  margin:0;
}

.dashboardHeaderControls{
  display:flex;
  align-items:center;
  gap:10px;
}

.dashboardHeaderControls > button,
.dashboardHeaderControls > a button,
.dashboardHeaderControls > .themeToggleLink,
.dashboardHeaderControls > .dashboardHatCount{
  float:none !important;
  margin:0 !important;
}

.dashboardHatCount{
  display:inline-flex;
  align-items:center;
  width: 107px;
  gap:4px;
  float:right;
  cursor:pointer;
  font-size:20px;
}

@media screen and (max-width:600px){
  .dashboardPage{
    padding:16px 12px;
  }

  .dashboardHeader{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  .dashboardHeader h1{
    text-align:left;
    font-size:28px;
    flex-shrink:0;
  }

  .dashboardHeaderControls{
    justify-content:flex-end;
    flex-wrap:nowrap;
    flex-shrink:0;
  }
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media screen and (max-width:1024px){
  .writeMenu{
    position:fixed;
    top:0;
    padding:2%;
    width:100%;
    background-color:var(--panel);
    background-image:var(--panel-bg-image);
    background-size:var(--panel-bg-size);
  }
  .meta {
    display: none;
  }
  .sortArrow,
  .sortSvg{
    display:inline;
    float:right;
    text-align:center;
    padding:12px;
    margin-top:-8px;
    fill:var(--ink);
    height:20px;
    width:30px;
    cursor:pointer;
    stroke:var(--ink);
  }
  .highlightDiv{padding:2px}
  .categoryFilter{width:60%;margin-left:15px}
  .dashboardCreateNoteForm{flex-wrap:wrap;align-items:stretch}
  .dashboardCreateNoteForm .noteName{flex:1 1 100%;width:auto !important}
  .dashboardCategorySelect{flex:1 1 170px;width:auto}
  .dashboardCreateNoteButton{flex:1 1 130px;width:auto !important}
  .dashboardFilterBar{padding:var(--s-2);gap:var(--s-2)}
  .dashboardFilterLabel{flex:1 1 100%}
  .dashboardSortSelect{flex:1 1 140px;width:auto}
  .dashboardSearchInput.categoryFilter{flex:1 1 100%;width:auto !important;margin:0}
  .noteName{width:32% !important}
}

/* Daily Writing Grid */
.dwg-wrapper {
  overflow-x: auto;
  overflow-y: auto;
}
.dwg-header {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
  padding-left: 40px;
}
.dwg-headerCell {
  width: 14px;
  font-size: 9px;
  text-align: center;
  color: #888;
  margin-right: 3px;
  flex-shrink: 0;
}
.dwg-row {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.dwg-label {
  width: 46px;
  font-size: 11px;
  text-align: right;
  padding-right: 4px;
  color: #888;
  flex-shrink: 0;
}
.dwg-cell {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  flex-shrink: 0;
  border-radius: 3px;
}
.dwg-cell--hidden {
  visibility: hidden;
}
.dwg-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  justify-content: flex-end;
  font-size: 11px;
  color: #888;
}
.dwg-legendSwatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.dwg-mode-opt {
  transition: background .12s, color .12s;
  user-select: none;
}

.dwg-mode-opt:hover {
  filter: brightness(1.15);
}