/* Sticky Notes: seven screenshot-matched note colors. Theme-safe chrome and accessible mini-windows. */
.tick-sticky-panel{
  margin:0 0 18px;padding:17px 19px;background:var(--tick-ui,var(--sc-surface,#fff));
  border:1px solid var(--sc-border,#d5ddd7);border-radius:16px;
  box-shadow:0 3px 15px rgba(23,39,31,.04);color:var(--tick-ink);
}
.tick-sticky-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}
.tick-sticky-heading h2{font-size:17px;font-weight:780;letter-spacing:0;margin:0 0 5px;color:var(--tick-ink)}
.tick-sticky-heading p{font-size:12px;line-height:1.6;margin:0;color:var(--tick-muted)}
.tick-sticky-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tick-sticky-buttons button{
  min-height:40px;border:1px solid var(--sc-button-border,#b5d4c3);border-radius:10px;
  padding:8px 13px;background:var(--sc-button-bg,#e7f3ed);
  color:var(--sc-button-text,#285c48);font:700 12px/1.3 Inter,"Segoe UI",sans-serif;
}
.tick-sticky-buttons button[data-sticky-new]{
  background:var(--sc-accent-soft,#dcefe5);border-color:var(--tick-accent)
}
.tick-sticky-buttons button:disabled{opacity:.55;cursor:not-allowed}
.tick-sticky-buttons button:not(:disabled):hover{background:var(--sc-accent-hover,#d6ede0)}
.tick-sticky-board{padding-top:16px}
.tick-sticky-board[hidden]{display:none}
.tick-sticky-palette-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tick-sticky-palette-row>span{font-size:12px;font-weight:750;color:var(--tick-muted)}
.tick-sticky-colors{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tick-sticky-color{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;min-width:29px;border:2px solid transparent;border-radius:9px;
  padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);cursor:pointer;
}
.tick-sticky-color[aria-pressed="true"]{border-color:currentColor}
.tick-sticky-color[aria-pressed="true"]::after{
  content:"✓";font:800 14px/1 Arial,sans-serif;color:#232323;
  text-shadow:0 1px 0 rgba(255,255,255,.55)
}
.tick-sticky-color[title="Charcoal"][aria-pressed="true"]::after{color:white;text-shadow:none}
.tick-sticky-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;margin:15px 0 2px}
.tick-sticky-item{
  width:100%;min-width:0;min-height:94px;text-align:left;display:flex;flex-direction:column;gap:5px;
  padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:11px;
  background:var(--sticky-bg);color:var(--sticky-ink);box-shadow:0 4px 9px rgba(21,31,27,.05);
}
.tick-sticky-item:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(21,31,27,.12)}
.tick-sticky-item strong,.tick-sticky-item span,.tick-sticky-item small{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%
}
.tick-sticky-item strong{font:750 13px/1.4 Inter,"Segoe UI",sans-serif}
.tick-sticky-item span{font:450 12px/1.4 Inter,"Segoe UI",sans-serif;opacity:.83}
.tick-sticky-item small{font-size:10px;font-weight:650;opacity:.8;margin-top:auto}
.tick-sticky-empty{font-size:13px;margin:0;color:var(--tick-muted);grid-column:1/-1;padding:7px 0}
.tick-sticky-status{font-size:11px;color:var(--tick-muted);margin:10px 0 0;min-height:16px}
.tick-sticky-status[data-error="true"]{color:var(--sc-danger,#b63b33)}
.tick-sticky-windows{position:fixed;inset:0;pointer-events:none;z-index:1350}
.tick-sticky-window{
  position:fixed;box-sizing:border-box;display:flex;flex-direction:column;
  min-width:240px;min-height:225px;max-width:min(520px,calc(100vw - 16px));
  max-height:calc(100dvh - 16px);overflow:hidden;resize:both;
  pointer-events:auto;border:1px solid rgba(0,0,0,.14);border-radius:12px;
  background:var(--sticky-bg);color:var(--sticky-ink);
  box-shadow:0 12px 36px rgba(12,21,19,.27),0 2px 7px rgba(12,21,19,.12);
  font-family:Inter,"Segoe UI",sans-serif;
}
.tick-sticky-window-top{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-bottom:1px solid rgba(0,0,0,.10);cursor:grab;touch-action:none;user-select:none
}
.tick-sticky-window-top:active{cursor:grabbing}
.tick-sticky-grip{font-size:18px;letter-spacing:-4px;line-height:1;opacity:.6;padding-right:4px}
.tick-sticky-window-label{font-size:10px;font-weight:850;letter-spacing:.12em;flex:1;min-width:0}
.tick-sticky-window-actions{display:flex;align-items:center;gap:2px}
.tick-sticky-window-actions button{
  background:rgba(255,255,255,.25);border:1px solid rgba(0,0,0,.1);
  color:inherit;border-radius:7px;width:29px;height:29px;
  padding:0;font:700 17px/1 Inter,"Segoe UI",sans-serif;display:grid;place-items:center
}
.tick-sticky-window-actions button:hover{background:rgba(255,255,255,.48)}
.tick-sticky-window .tick-sticky-title{
  width:100%;box-sizing:border-box;padding:9px 12px 7px;outline:none;border:0;
  background:transparent;color:inherit;font:750 16px/1.35 Inter,"Segoe UI",sans-serif;
}
.tick-sticky-window .tick-sticky-text{
  flex:1;min-height:60px;width:100%;box-sizing:border-box;resize:none;
  padding:7px 12px 12px;border:0;background:transparent;color:inherit;
  font:500 14px/1.55 Inter,"Segoe UI",sans-serif;outline:0;
}
.tick-sticky-window .tick-sticky-title::placeholder,
.tick-sticky-window .tick-sticky-text::placeholder{color:inherit;opacity:.55}
.tick-sticky-window-footer{
  padding:9px 10px;display:flex;justify-content:space-between;align-items:center;gap:7px;
  border-top:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.1)
}
.tick-sticky-window-footer .tick-sticky-color{width:23px;height:23px;min-width:23px;border-radius:6px}
.tick-sticky-window-footer .tick-sticky-save-hint{font-size:10px;font-weight:600;opacity:.65;white-space:nowrap}
:is(.ticknotes-page,.tick-sticky-dashboard) .tick-sticky-window :is(input,textarea):focus-visible{
  outline:2px solid rgba(0,0,0,.35);outline-offset:-3px
}
:is(.ticknotes-page,.tick-sticky-dashboard) .tick-sticky-window button:focus-visible{outline:2px solid var(--sticky-ink);outline-offset:2px}
@media(max-width:720px){
  .tick-sticky-panel{padding:14px}
  .tick-sticky-heading{align-items:stretch}
  .tick-sticky-buttons button{flex:1}
  .tick-sticky-shelf{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .tick-sticky-window{resize:none;max-width:calc(100vw - 16px)}
  .tick-sticky-window .tick-sticky-text{font-size:16px}
  .tick-sticky-window-footer .tick-sticky-save-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tick-sticky-item:hover{transform:none}
}
@media print{
  .tick-sticky-panel,.tick-sticky-windows{display:none!important}
}

/* Sticky palette isolation: global themed button !important rules must never
   erase the swatches or stretch these color choices into 44px capsules.
   Keep the seven reference colors independent of the website accent palette. */
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  min-width:0;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color {
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-flex !important;
  flex:0 0 32px !important;
  box-sizing:border-box !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(25,30,35,.22) !important;
  border-radius:8px !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  color:#273037 !important;
  cursor:pointer;
  line-height:1 !important;
  transition:transform .12s ease, border-color .12s ease !important;
}
/* Attribute-based fills beat global html[data-theme] button and button:hover
   !important declarations. Inline JS background remains a visual fallback. */
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="0"] {background:#ffe66e !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="1"] {background:#a1ef9b !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="2"] {background:#ffafdf !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="3"] {background:#d7afff !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="4"] {background:#9edfff !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="5"] {background:#e0e0e0 !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="6"] {background:#767676 !important;color:#fff !important;}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[aria-pressed="true"] {
  border:2px solid #25312b !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75) !important;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[aria-pressed="true"]::after {
  font-size:15px;
  line-height:1;
  color:#25312b;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="6"][aria-pressed="true"] {
  border-color:#fff !important;
  box-shadow:inset 0 0 0 1px #434343 !important;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color[data-sticky-color="6"][aria-pressed="true"]::after {
  color:white;
  text-shadow:none;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color:focus-visible {
  outline:3px solid var(--st-control-ring,var(--tick-accent)) !important;
  outline-offset:2px !important;
}
@media (hover:hover) and (pointer:fine) {
  html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color:hover {
    transform:translateY(-1px);
  }
}
/* Swatches inside mini-windows stay compact, including when resized narrow. */
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-window-footer {
  flex-wrap:wrap;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-window-footer .tick-sticky-colors {
  gap:4px;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-window-footer .tick-sticky-colors > button.tick-sticky-color {
  flex-basis:23px !important;
  width:23px !important;
  min-width:23px !important;
  max-width:23px !important;
  height:23px !important;
  min-height:23px !important;
  max-height:23px !important;
  border-radius:6px !important;
}
/* The notes-list cards are functional color previews, not standard theme buttons. */
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) button.tick-sticky-item,
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) button.tick-sticky-item:hover {
  background:var(--sticky-bg) !important;
  color:var(--sticky-ink) !important;
  border-color:rgba(25,30,35,.17) !important;
}
@media (prefers-reduced-motion:reduce) {
  html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-colors > button.tick-sticky-color {
    transition:none !important;
  }
}


/* Keep the extra Always on Top action compact, even under global theme button styles. */
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-window-top .tick-sticky-window-actions button {
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 28px!important;
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(32,32,32,.19)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.24)!important;
  color:var(--sticky-ink)!important;
  font:700 16px/1 Inter,system-ui,sans-serif!important;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-window-top .tick-sticky-window-actions button:hover {
  background:rgba(255,255,255,.47)!important;
  color:var(--sticky-ink)!important;
}
html[data-theme] :is(body.ticknotes-page,body.today-dashboard-preview,body.tick-sticky-dashboard) .tick-sticky-window-top .tick-sticky-window-actions [data-sticky-action="float"] {
  font-size:19px!important;
  border-color:rgba(25,35,30,.32)!important;
  font-weight:900!important;
}
.tick-sticky-window-actions {flex:none;}
.tick-sticky-window-top .tick-sticky-window-label {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


/* All app pages: show the same signed-in pinned notes without changing the
   surrounding page layout, navigation or writing workspace. */
body.tick-sticky-dashboard > .tick-sticky-panel {
  position:fixed;
  inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) auto;
  z-index:1550;
  width:min(375px,calc(100vw - 24px));
  max-height:min(68dvh,650px);
  overflow:auto;
  margin:0;
  padding:14px;
  background:var(--sc-surface,#fff);
  border-color:var(--sc-border,#d5ddd7);
  color:var(--sc-text,#233b35);
  box-shadow:0 8px 24px rgba(12,25,19,.18);
}
body.tick-sticky-dashboard .tick-sticky-heading h2 {
  font:750 15px/1.3 Inter,system-ui,sans-serif!important;
  color:var(--sc-text,#233b35);
}
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed {
  width:auto;
  max-width:calc(100vw - 24px);
  padding:7px;
  border-radius:13px;
}
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed .tick-sticky-heading {
  gap:0;
}
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed .tick-sticky-heading > div:first-child,
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed .tick-sticky-status,
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed [data-sticky-new] {
  display:none!important;
}
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed .tick-sticky-buttons {
  gap:0;
}
body.tick-sticky-dashboard .tick-sticky-panel.is-collapsed [data-sticky-list] {
  min-height:38px;
  padding:7px 12px;
}
body.tick-sticky-dashboard .tick-sticky-board {
  overflow-y:auto;
  max-height:min(45dvh,410px);
}
body.tick-sticky-dashboard .tick-sticky-window {
  font-family:Inter,system-ui,sans-serif;
}
@media(max-width:640px) {
  body.tick-sticky-dashboard > .tick-sticky-panel {
    right:12px;
    left:auto;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:min(360px,calc(100vw - 24px));
    max-height:60dvh;
  }
  body.tick-sticky-dashboard .tick-sticky-shelf {
    grid-template-columns:repeat(auto-fill,minmax(125px,1fr));
  }
}
@media print {
  body.tick-sticky-dashboard > .tick-sticky-panel {
    display:none!important;
  }
}

/* Handwritten rough-work workspace */
.tick-sticky-drawing{display:flex;flex:0 1 auto;flex-direction:column;min-height:120px;min-width:0;height:38%;overflow:hidden;background:rgba(255,255,255,.17)}
/* Splitter is independent of the drawing surface, so touch dragging never paints. */
.tick-sticky-draw-resize{display:flex;align-items:center;justify-content:center;flex:0 0 16px;min-height:16px;touch-action:none;user-select:none;cursor:row-resize;border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.16);background:rgba(255,255,255,.22)}
.tick-sticky-draw-resize::after{content:"";width:46px;height:4px;border-radius:9px;background:var(--sticky-ink);opacity:.5}
.tick-sticky-draw-resize:hover{background:rgba(255,255,255,.4)}
.tick-sticky-draw-resize:focus-visible{outline:2px solid var(--sticky-ink);outline-offset:-3px;background:rgba(255,255,255,.4)}
.tick-sticky-draw-tools{display:flex;flex-wrap:wrap;gap:3px;padding:4px;align-items:center}
.tick-sticky-draw-tools button{font:600 10px/1.2 Inter,system-ui,sans-serif!important;min-height:28px!important;padding:4px 6px!important;border-radius:6px!important;border:1px solid rgba(0,0,0,.2)!important;background:rgba(255,255,255,.4)!important;color:var(--sticky-ink)!important}
.tick-sticky-draw-tools button[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:-2px}
.tick-sticky-canvas{display:block;flex:1;width:100%;min-height:55px;touch-action:none;cursor:crosshair}