/* ============================================================
   RafifOS · 20 shell
   ============================================================ */

/* ---------- status pill (melayang, bukan bar penuh) ---------- */
.status{
  position: absolute;
  top: calc(var(--s4) + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: calc(var(--u) * 9);
  padding: 0 var(--s4);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.status .sep{ width: 1px; height: 12px; background: var(--line-strong); }
.status .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 0 0 var(--a-40);
  animation: pulse 2.6s var(--ease-inout) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 var(--a-40); }
  50%{ box-shadow: 0 0 0 4px var(--a-08); }
}
.status.working .dot{ background: var(--a); }
body.is-immersive .status{ opacity: 0; transform: translate3d(-50%, -8px, 0); }

/* ---------- panggung ---------- */
.stage{
  position: absolute;
  inset: 0;
  z-index: 14;
  overflow: hidden;
}

/* ---------- home ---------- */
.home{
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.home.dimmed{
  opacity: .18;
  pointer-events: none;
}
.home-scroll{
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:
    calc(var(--s10) + env(safe-area-inset-top, 0px))
    calc(var(--s8) + env(safe-area-inset-right, 0px))
    calc(var(--s12) * 2.4 + env(safe-area-inset-bottom, 0px))
    calc(var(--s8) + env(safe-area-inset-left, 0px));
  -webkit-overflow-scrolling: touch;
}
.home-scroll::-webkit-scrollbar{ width: 0; }
.home-scroll{ display: flex; flex-direction: column; }
.home-foot{
  margin-top: auto;
  padding-top: var(--s10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  user-select: none;
}
.home-foot .sep{ opacity: .5; }

/* kepala: jam besar, tenang, tanpa ornamen */
.head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  margin-bottom: var(--s8);
  flex-wrap: wrap;
}
.clock-big{
  font-size: var(--t-display);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.clock-big b{ font-weight: 650; letter-spacing: -.045em; }
.head-meta{ text-align: right; }
.head-meta .day{
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.head-meta .sub{ font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }

/* strip widget */
.widgets{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.w{
  position: relative;
  min-height: calc(var(--u) * 24);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) linear;
  contain: layout paint;
}
.w:active{ transform: scale(.975); }
.w .k{ font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.w .v{ font-size: var(--t-h2); font-weight: 640; letter-spacing: -.02em; }
.w .s{ font-size: var(--t-xs); color: var(--ink-3); }
.w .bar{ height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.w .bar i{ display: block; height: 100%; border-radius: 99px; background: var(--a); transform-origin: left center; transition: transform var(--d-slow) var(--ease-out); }
.w.span-2{ grid-column: span 2; }
.w.accent{
  background: linear-gradient(150deg, var(--a-14), transparent 72%), var(--surface);
}
.w.accent .v{ color: var(--ink); }

/* bagian aplikasi */
.sect-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s6) 0 var(--s3);
}
.grid-apps{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s3);
}

/* ---------- ikon aplikasi ---------- */
.app{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s1);
  border-radius: var(--r-md);
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) linear;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.app:active{ transform: scale(.92); background: var(--hover); }
.app .tile{
  position: relative;
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
  border-radius: calc(var(--u) * 4.2);
  display: grid;
  place-items: center;
  color: var(--ink);
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 52%),
    var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1), inset 0 1px 0 var(--glass-edge);
  transition: transform var(--d-fast) var(--ease-out);
  overflow: hidden;
}
[data-theme="light"] .app .tile{
  background: linear-gradient(160deg, #fff, #F1ECE1);
  box-shadow: var(--sh-1), inset 0 1px 0 #fff;
}
.app .tile svg{ width: 55%; height: 55%; }
.app .tile::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, var(--a-08));
  pointer-events: none;
}
.app .label{
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  max-width: 100%;
  letter-spacing: .01em;
}
.app.tint .tile{
  color: var(--a);
  background:
    linear-gradient(160deg, var(--a-24), transparent 70%),
    var(--surface-2);
}

/* ---------- tray bawah ---------- */
.tray-wrap{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 0 var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.tray{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s1);
  height: calc(var(--u) * 13);
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  transform: translate3d(0,0,0);
  transition: transform var(--d-slow) var(--ease-out), opacity var(--d-base) linear;
  will-change: transform;
}
body.is-immersive .tray{ transform: translate3d(0, 140%, 0); }
.tray .ti{
  position: relative;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) linear, color var(--d-fast) linear;
}
.tray .ti svg{ width: 22px; height: 22px; }
.tray .ti:active{ transform: scale(.88); }
.tray .ti.on{ background: var(--a-14); color: var(--ink); }
.tray .ti.on::after{
  content: "";
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--a);
}
.tray .div{ width: 1px; height: 18px; background: var(--line-strong); margin: 0 var(--s1); }
.tray .ti .count{
  position: absolute;
  top: 2px; right: 2px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--a);
  color: var(--a-ink);
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---------- jendela ---------- */
.win{
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  transform-origin: 50% 20%;
  will-change: transform, opacity;
  contain: layout paint style;
  backface-visibility: hidden;
}
.win .win-head{
  flex: 0 0 auto;
  height: calc(var(--u) * 11);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s2) 0 var(--s3);
  touch-action: none;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0));
}
[data-theme="light"] .win .win-head{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.win .grip{
  display: grid;
  place-items: center;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  flex: 0 0 auto;
}
.win .grip svg{ width: 15px; height: 15px; }
.win .win-title{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win .win-tools{ display: flex; gap: 2px; flex: 0 0 auto; }
.win .wt{
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: background var(--d-fast) linear, color var(--d-fast) linear, transform var(--d-fast) var(--ease-out);
}
.win .wt svg{ width: 15px; height: 15px; }
.win .wt:active{ transform: scale(.88); background: var(--press); }
.win .wt.close:active{ color: #E2685A; }
.win .win-body{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.win.focused{ box-shadow: var(--sh-4); }
.win.unfocused{ box-shadow: var(--sh-2); }
.win.unfocused .win-head{ opacity: .72; }
.win.max{ border-radius: 0; }

/* garis angin: tanda tangan RafifOS, hairline aksen di tepi atas jendela aktif */
.win.focused::before{
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--a-40), transparent);
  opacity: .9;
}

/* pegangan ubah ukuran */
.win .rz{
  position: absolute;
  z-index: 5;
  touch-action: none;
}
.win .rz.br{ right: 0; bottom: 0; width: 34px; height: 34px; cursor: nwse-resize; }
.win .rz.r{ right: 0; top: 34px; bottom: 34px; width: 12px; cursor: ew-resize; }
.win .rz.b{ left: 34px; right: 34px; bottom: 0; height: 12px; cursor: ns-resize; }

/* pratinjau saat jendela dikecilkan */
.mini{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* ---------- panel samping (sheet) ---------- */
.sheet-scrim{
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--veil);
  opacity: 0;
  transition: opacity var(--d-base) linear;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sheet-scrim{
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-base) linear, visibility 0s linear var(--d-base);
}
.sheet-scrim.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--d-base) linear;
}
.sheet{
  position: absolute;
  z-index: 51;
  left: 50%;
  bottom: 0;
  width: min(560px, calc(100% - var(--s6)));
  max-height: 78%;
  transform: translate3d(-50%, 100%, 0);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex;
  flex-direction: column;
  transition: transform var(--d-slow) var(--ease-out);
  will-change: transform;
}
.sheet.open{ transform: translate3d(-50%, 0, 0); }
.sheet .sheet-grab{
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.sheet .sheet-grab i{
  width: 38px; height: 4px; border-radius: 99px; background: var(--line-strong);
}
.sheet .sheet-body{ padding: var(--s4) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }

/* ---------- command palette ---------- */
.palette{
  position: absolute;
  z-index: 60;
  top: 12%;
  left: 50%;
  width: min(620px, calc(100% - var(--s8)));
  transform: translate3d(-50%, -8px, 0) scale(.98);
  opacity: 0;
  pointer-events: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: opacity var(--d-fast) linear, transform var(--d-base) var(--ease-out);
  will-change: transform, opacity;
}
.palette.open{ opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); pointer-events: auto; }
.palette-scrim{
  position: absolute;
  inset: 0;
  z-index: 59;
  background: var(--veil);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-fast) linear, visibility 0s linear var(--d-base);
}
.palette-scrim.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--d-fast) linear;
}
.palette .p-in{
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.palette .p-in input{
  flex: 1 1 auto;
  font-size: var(--t-h2);
  font-weight: 500;
  background: transparent;
}
.palette .p-list{ max-height: 46vh; overflow-y: auto; padding: var(--s2); }
.palette .p-item{
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--ink-2);
}
.palette .p-item svg{ width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.palette .p-item.sel{ background: var(--a-14); color: var(--ink); }
.palette .p-item.sel svg{ color: var(--a); }
.palette .p-item .hint{ margin-left: auto; font-size: var(--t-micro); color: var(--ink-4); font-family: var(--font-mono); }

/* ---------- toast ---------- */
.toasts{
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: calc(var(--u) * 20 + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  pointer-events: none;
  width: min(440px, calc(100% - var(--s8)));
}
.toast{
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 550;
  animation: toast-in var(--d-base) var(--ease-out) both;
}
.toast.out{ animation: toast-out var(--d-fast) var(--ease-out) both; }
.toast svg{ width: 17px; height: 17px; color: var(--a); flex: 0 0 auto; }
@keyframes toast-in{
  from{ opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); }
  to{ opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes toast-out{
  from{ opacity: 1; transform: translate3d(0,0,0) scale(1); }
  to{ opacity: 0; transform: translate3d(0, 8px, 0) scale(.98); }
}

/* ---------- orientasi ---------- */
body.is-portrait .grid-apps{ grid-template-columns: repeat(4, minmax(0,1fr)); }
body.is-portrait .widgets{ grid-template-columns: repeat(2, minmax(0,1fr)); }
body.is-portrait .home-scroll{ padding-left: var(--s5); padding-right: var(--s5); }
body.is-narrow .grid-apps{ grid-template-columns: repeat(3, minmax(0,1fr)); }
body.is-narrow .widgets{ grid-template-columns: repeat(2, minmax(0,1fr)); }
body.is-narrow .w.span-2{ grid-column: span 2; }

/* ---------- pratinjau snap saat jendela diseret ke tepi ---------- */
.snap-ghost{
  position: absolute;
  z-index: 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--a-40);
  background: var(--a-08);
  box-shadow: inset 0 0 0 1px var(--a-14);
  pointer-events: none;
  transition: all 120ms var(--ease-out);
}

/* ============================================================
   0.2.77 · pusat kendali, mission control, kisi aplikasi
   ============================================================ */

/* ---------- pusat kendali ---------- */
.center-scrim{
  position: absolute; inset: 0; z-index: 64;
  background: var(--veil);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-base) linear, visibility 0s linear var(--d-base);
}
.center-scrim.open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--d-base) linear; }
.center{
  position: absolute; z-index: 65;
  top: 62px; left: 50%;
  width: min(420px, calc(100% - 28px));
  border-radius: var(--r-lg);
  transform: translate3d(-50%, -10px, 0) scale(.98);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-fast) linear, transform var(--d-base) var(--ease-out), visibility 0s linear var(--d-base);
}
.center.open{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition: opacity var(--d-fast) linear, transform var(--d-base) var(--ease-out);
}
.center-body{ padding: var(--s3); }
.center-h{ display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2) var(--s3); }
.center-h .wt{ width: 28px; height: 28px; border-radius: var(--r-xs); display: grid; place-items: center; color: var(--ink-3); }
.center-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ctile{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: left;
  transition: background var(--d-fast) linear, transform var(--d-fast) var(--ease-out);
}
.ctile:active{ transform: scale(.98); }
.ctile.on{ background: var(--a-14); border-color: var(--a-24); }
.ctile .cico{
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
  flex: 0 0 auto;
}
.ctile.on .cico{ background: var(--a); color: #14161A; }
.ctile .clab{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ctile .cn{ font-size: var(--t-sm); font-weight: 620; color: var(--ink); }
.ctile .cv{ font-size: var(--t-micro); color: var(--ink-4); }
.center-accents{ display: flex; gap: var(--s2); padding: var(--s4) var(--s1) var(--s3); justify-content: space-between; }
.cacc{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform var(--d-fast) var(--ease-out); }
.cacc.on{ transform: scale(1.12); box-shadow: 0 0 0 2px var(--a-40); }
.center-row{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s1) var(--s2) var(--s2);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.center-row input{ flex: 1 1 auto; }
.center-row .micro{ width: 34px; text-align: right; }
.center-foot{ display: flex; justify-content: flex-end; padding: var(--s2) var(--s2) var(--s1); }
.center-foot .chip{ display: inline-flex; align-items: center; gap: 6px; }

/* ---------- mission control ---------- */
.mission-scrim{
  position: absolute; inset: 0; z-index: 13;
  background: rgba(4,5,6,.72);
  animation: fadeIn 200ms var(--ease-out) both;
}
[data-theme="light"] .mission-scrim{ background: rgba(28,26,22,.42); }
.mission-bar{
  position: absolute; left: 0; right: 0; bottom: 106px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.mission-hint{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237,233,225,.6);
}
[data-theme="light"] .mission-hint{ color: rgba(28,26,22,.6); }
.win.in-mission{ box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.win.in-mission .win-head{ opacity: .9; }

/* ---------- kisi aplikasi: 16 ikon ---------- */
.grid-apps{ grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--s2); }
body.is-portrait .grid-apps{ grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s3); row-gap: var(--s5); }
body.is-portrait .app .tile{ width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 5); }
body.is-portrait .app .label{ font-size: var(--t-xs); }
@media (max-width: 760px){
  .grid-apps{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.app .label{ font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }