/* RETRO MILK — optional special theme.
   Soft 2000s window / retro handheld influence, restrained by modern Notion spacing.
   Only applies when the user selects this theme in Settings. */
body[data-theme="retro-milk"]{
  --theme-page:#fdfbfc;
  --theme-card:#fff;
  --theme-input:#fbf7f9;
  --theme-nav:#f9edf3;
  --theme-hover:#f9f7fa;
  --theme-accent:#7f7280;
  --theme-soft:#f9f2f6;
  --theme-border:#e8e7e8;
  --theme-text:#3f4342;
  --theme-subtle:#828787;
  --theme-indicator:#bca0b0;
  --pastel-action:#efd9e3;
  --pastel-action-hover:#eacbd8;
  --pastel-action-text:#655363;
  --pastel-detail:#a6889d;
  --ms-ink:#454549;
  --ms-secondary:#797e80;
  --ms-faint:#9ba0a4;
  --ms-rule:#eae9eb;
  --ms-rule-soft:#f2f0f2;
  --ms-paper:#fff;
  --ms-quiet:#fbf9fa;
  --ms-accent-bg:#f3e5ec;
  --ms-accent-text:#6c5f6d;
  --ms-focus:#bc9eb1;
  --ms-card-radius:17px;
  --ms-elevation:0 2px 8px rgba(96,84,110,.045);
  color:#424549!important;
  /* Almost invisible graph paper from the supplied retro references. */
  background-color:#fdfbfc!important;
  background-image:
    linear-gradient(to right,rgba(185,180,190,.073) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(185,180,190,.073) 1px,transparent 1px)!important;
  background-size:26px 26px!important;
}
body[data-theme="retro-milk"] .content,
body[data-theme="retro-milk"] .main{
 background:transparent!important;
}
body[data-theme="retro-milk"] .side{
 background:rgba(255,254,255,.96)!important;
 border-color:#ece8ed!important;
}
body[data-theme="retro-milk"] .brand .logo{
 background:linear-gradient(145deg,#e5f6ec,#f9e6ef 65%,#ede6f9)!important;
 border:1px solid #e8e7ed!important;
 border-radius:12px!important;
}
body[data-theme="retro-milk"] .brand .logo i{
 background:#a6c5b8!important;
}
body[data-theme="retro-milk"] .side .nav.active{
 background:#f8edf3!important;
 color:#795f71!important;
 border:1px solid #f3e5ed!important;
}
body[data-theme="retro-milk"] .side .nav:hover:not(.active){
 background:#f9f7fa!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget{
 border:1px solid #e7e6e9!important;
 background:rgba(255,255,255,.97)!important;
 border-radius:17px!important;
 box-shadow:0 2px 8px rgba(96,84,110,.038)!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:hover{
 box-shadow:0 4px 14px rgba(96,84,110,.055)!important;
}
body[data-theme="retro-milk"] .widget .widget-head,
body[data-theme="retro-milk"] .widget .widget-name{
 color:#47494b!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .widget-name svg{
 color:#929a9d!important;
 stroke-width:1.7;
}
/* Only selected media + focus widgets carry a retro window rim. */
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is(
 [data-widget="photos"],[data-widget="music"],[data-widget="quote"],[data-widget="timer"]){
 position:relative!important;
 border-color:#e8e1e9!important;
 background:
  linear-gradient(180deg,rgba(252,242,248,.85) 0 37px,rgba(255,255,255,.98) 37px 100%)!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is(
 [data-widget="photos"],[data-widget="music"],[data-widget="quote"],[data-widget="timer"])::before{
 content:"";
 position:absolute;
 top:-1px;left:19px;
 width:74px;height:4px;
 background:linear-gradient(90deg,#e9d1df 0 32%,#e5e0f1 32% 66%,#d4ebdf 66% 100%);
 border-radius:0 0 5px 5px;
 pointer-events:none;
 opacity:.84;
}
/* Buttons and small inset surfaces should stay soft, never candy-colored. */
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .quick,
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .notes-input,
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .task-add input{
 background:#fbf8fa!important;
 border-color:#ede9ed!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .photo-tile.empty{
 background:#f9f8fb!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="calendar"] .week .day.today b{
 background:#eecbdc!important;
 border-color:#eecbdc!important;
 color:#6c5266!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="calendar"] .week .day.selected:not(.today) b{
 background:transparent!important;
 border-color:#bba2b4!important;
 color:#756375!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="timer"] .rt-timer-actions button:first-child{
 background:#f1dce7!important;
 color:#71566a!important;
 border-color:transparent!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="weekly"] .rt-week-bar{
 background:#faf6f9!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .rt-progress-fill,
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .rt-fill{
 background:#dab6c8!important;
}
body[data-theme="retro-milk"] .tool-right .editbtn.selected,
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .save,
body[data-theme="retro-milk"] .modal .primary{
 background:#edd5e0!important;
 color:#655262!important;
 border:1px solid #ead0dd!important;
}
body[data-theme="retro-milk"] .tool-right .editbtn:not(.selected){
 background:#fbfafb!important;
 color:#676b6c!important;
 border:1px solid #e9e7ea!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget a,
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .mini-btn{
 color:#977c90!important;
}
body[data-theme="retro-milk"] .settings-panel .theme-choice.active{
 background:#f8eff5!important;
}
body[data-theme="retro-milk"] :is(button,input,textarea,select):focus-visible{
 outline-color:#bda6b8!important;
}
@media(max-width:720px){
 body[data-theme="retro-milk"]{
  background-size:21px 21px!important;
 }
 body[data-theme="retro-milk"] #widgets.custom-layout>.widget{
  border-radius:15px!important;
 }
 body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is(
 [data-widget="photos"],[data-widget="music"],[data-widget="quote"],[data-widget="timer"]){
  background:linear-gradient(180deg,#fcf5f8 0 32px,#fff 32px 100%)!important;
 }
}
/* Special tile preview remains visible from *any* currently selected theme. */
body[data-theme] .settings-panel .settings-special-heading{
 display:flex;align-items:center;gap:8px;
 margin:18px 0 9px;
 font-size:12px;font-weight:610;
 color:#767577;
}
body[data-theme] .settings-panel .settings-special-heading::after{
 content:"";height:1px;background:#eeecef;flex:1;
}
body[data-theme] .settings-panel .theme-grid-special{
 grid-template-columns:minmax(0,1fr)!important;
}
body[data-theme] .settings-panel .theme-choice-special{
 min-height:70px!important;
 padding:10px 12px!important;
 border:1px solid #eae5ea!important;
 border-radius:13px!important;
 background:#fffdfd!important;
 display:flex;align-items:center;gap:13px;
}
body[data-theme] .settings-panel .theme-choice-special:hover{
 background:#fcf7fa!important;
}
body[data-theme] .settings-panel .theme-choice-special.active{
 background:#fbf3f7!important;
 border-color:#dfc9d7!important;
}
body[data-theme] .settings-panel .theme-choice-special .theme-name{
 display:block;flex:none;font-size:13px;font-weight:630;
 color:#4e4950!important;
}
body[data-theme] .settings-panel .theme-choice-special .theme-special-subtitle{
 display:block;font-size:11px;color:#9a929b;line-height:1.4;
 margin-top:4px;white-space:normal;
}
body[data-theme] .settings-panel .retro-theme-preview{
 flex:0 0 60px;
 width:60px;height:49px;
 border:1px solid #dcd7e0;
 border-radius:11px;
 background:linear-gradient(#f4e6ef 0 10px,#fff 10px 100%);
 box-shadow:inset 0 0 0 3px #fff;
 position:relative;overflow:hidden;
}
body[data-theme] .settings-panel .retro-theme-preview::before{
 content:"";
 position:absolute;
 top:3px;right:7px;width:4px;height:4px;
 background:#d8c0d0;
 border-radius:50%;
 box-shadow:-7px 0 #cbded8,-14px 0 #d7d1e8;
}
body[data-theme] .settings-panel .retro-theme-preview::after{
 content:"";
 position:absolute;
 left:10px;top:18px;width:27px;height:18px;
 background:#eaf6ef;border:1px solid #d8e9e0;border-radius:4px;
 box-shadow:10px 5px 0 -2px #eee7f6;
}

/* Theme picker content must truncate naturally on narrow screens. */
body[data-theme] .settings-panel .theme-choice-label{
 display:flex;flex:1 1 auto;flex-direction:column;
 justify-content:center;min-width:0;gap:0;
}
body[data-theme] .settings-panel .theme-choice-label .theme-name{
 flex:none;min-width:0;max-width:100%;
}
@media(max-width:480px){
 body[data-theme] .settings-panel .theme-choice-special{min-height:64px!important;padding:9px!important;gap:9px!important}
 body[data-theme] .settings-panel .retro-theme-preview{flex-basis:52px;width:52px;height:43px}
 body[data-theme] .settings-panel .theme-choice-special .theme-special-subtitle{font-size:10px}
}


/* Retro Milk v1.1 · make the special theme visibly different from standard pastels.
   Pastel window chrome appears only on media cards; compact utility cards stay clean. */
body[data-theme="retro-milk"]{
 --theme-page:#fffafd;
 --theme-nav:#f9ecf3;
 --theme-soft:#f8f1f6;
 --theme-border:#eadfe8;
 background-image:
  linear-gradient(to right,rgba(181,173,187,.075) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(181,173,187,.075) 1px,transparent 1px)!important;
}
body[data-theme="retro-milk"] .side{
 background:linear-gradient(170deg,#fdfbfe 0%,#f8fbf8 55%,#fffdfd 100%)!important;
 border-color:#e8e4eb!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget{
 border-color:#e9e1e8!important;
 box-shadow:0 2px 9px #7c6b7d0c!important;
}
/* Clear window titlebars resembling the delicate retro desktop reference. */
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="music"],[data-widget="photos"]){
 position:relative!important;
 padding-top:36px!important;
 background:#fff!important;
 border:1px solid #e8dbe6!important;
 box-shadow:0 2px 12px #b09aa716!important;
 isolation:isolate;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="music"],[data-widget="photos"])::before{
 content:"";
 display:block!important;
 position:absolute;top:0;left:0;right:0;
 width:100%;height:26px;
 border-radius:16px 16px 0 0;
 border-bottom:1px solid #eadfe7;
 background:linear-gradient(100deg,#f5e2ed 0%,#f1e8f5 49%,#e1f2ea 100%);
 opacity:.87;
 pointer-events:none;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="music"],[data-widget="photos"])::after{
 content:"";
 display:block!important;
 position:absolute;
 top:10px;right:17px;
 width:6px;height:6px;border-radius:50%;
 background:#caa9be;
 box-shadow:-12px 0 #c9dce9,-24px 0 #b9ded0;
 pointer-events:none;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="music"] .widget-head,
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="photos"] .widget-head{
 margin-top:0!important;
}
/* Other widgets retain the Notion-like grid but get an intentional accent hierarchy. */
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is(
 [data-widget="calendar"],[data-widget="quickmemo"],[data-widget="recent"],[data-widget="checklist"]){
 background:linear-gradient(180deg,#fcf8fb 0px,#fff 78px)!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="calendar"]{
 border-top:2px solid #cce8d9!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="quickmemo"]{
 border-top:2px solid #e8d2e6!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="recent"]{
 border-top:2px solid #d8d9ef!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="checklist"]{
 border-top:2px solid #d9ebe5!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is(
 [data-widget="weather"],[data-widget="pinned"],[data-widget="progress"],[data-widget="weekly"],[data-widget="dday"],[data-widget="journal"]){
 border-top:2px solid #e8dceb!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="quote"],[data-widget="timer"]){
 background:linear-gradient(180deg,#fdf8fc 0px,#fff 76px)!important;
 border-top:2px solid #d5e9e1!important;
}
/* Legibility: readable widget labels despite near-white decorative surfaces. */
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .widget-name{
 color:#5b505c!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget .widget-caption{
 color:#96909b!important;
}
body[data-theme="retro-milk"] #widgets.custom-layout>.widget[data-widget="recent"] .note-list{
 background:transparent!important;
}
/* A tiny line under the page heading echoes the rounded pastel device detail. */
body[data-theme="retro-milk"] #heading{
 position:relative;
 padding-bottom:10px;
}
body[data-theme="retro-milk"] #heading::after{
 content:"";
 position:absolute;bottom:0;left:0;
 width:51px;height:3px;
 border-radius:5px;
 background:linear-gradient(90deg,#ebc9d9 0 33%,#e2d5f1 33% 66%,#c4e4d5 66%);
 opacity:.8;
}
@media(max-width:719px){
 body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="music"],[data-widget="photos"]){
  padding-top:33px!important;
 }
 body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="music"],[data-widget="photos"])::before{
  height:23px;border-radius:14px 14px 0 0;
 }
 body[data-theme="retro-milk"] #widgets.custom-layout>.widget:is([data-widget="music"],[data-widget="photos"])::after{
  top:8px;right:14px;
 }
}